/*
* draw.js
* http://tasuke.dna.affrc.go.jp/
*
* Author: Jungsok Kim, Ryutaro Itoh
*
* Copyright (c) 2013 National Institute of Agrobiological Sciences   
*
* This software is released under the MIT License.
*
* http://opensource.org/licenses/mit-license.php
*/

///////////////////////////// Drawing canvas
function _drawCanvas() {
  localStorage.setItem("_exportFlg",0);
  Objects.titleWidth=parseInt(localStorage.getItem("_TitleW"));//14 letters
  Objects.titleIndent=5;
  Objects.titleGrp=parseInt(parseInt(localStorage.getItem("_TitleW")*0.7));//7 letters
  Objects.titleY=11;
  Objects.Tracks=_getTrack("view");
  if(localStorage.getItem("_TrackID")=="on"){Objects.TrackH=_getTrack("view").length*80+1;}
  else{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.other_1=_getList("other_1");
  Objects.other_2=_getList("other_2");
  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=_escapeHTML(localStorage.getItem("_Chr"));
  Objects.Pos=parseInt(localStorage.getItem("_Pos"));
  Objects.Mode=localStorage.getItem("_Mode");
/*
  if(localStorage.getItem("_titleFlg") == 1) {
  	titlestr = _getTitle();
  	var titleary = titlestr.split(",");
  	var title = titleary[0];
  	var subtitle = titleary[1];
   	Objects.Name=title;
  	Objects.NameSub=subtitle;
	localStorage.setItem("_Name",title);
	localStorage.setItem("_NameSub",subtitle);
	localStorage.setItem("_titleFlg","0");
  } else {

  	Objects.Name=localStorage.getItem("_Name");
  	Objects.NameSub=localStorage.getItem("_NameSub");
  }
*/
  Objects.Name=localStorage.getItem("_Name");
  Objects.NameSub=localStorage.getItem("_NameSub");
  Objects.Eff=localStorage.getItem("_Eff");
  Objects.Onebase=localStorage.getItem("_Onebase");
  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;
  Objects.Conditions = JSON.parse(localStorage.getItem("_Conditions"));
  if (typeof rangestart === undefined) {
	rangestart = "";
  }
  if (typeof rangeend === undefined) {
        rangeend = "";
  }
  _drawBLAST(localStorage.getItem("_Prm_str"));

  if(phenotypeFlg){
	  _getPhenolist();
	  var phenotype = localStorage.getItem("_Phenotype");
	  _getPheno(phenotype);
	  Objects.TotalChrsSize=_getTotalChrsSize();
	  Objects.ChrBeginPosOnAll=_getChrBeginPosOnAll();
	  Objects.Plot=localStorage.getItem("_Plot");
  }
  
  var CaWid = Objects.canvasWidth+265;
  var Pos;
  if(/k/.test(Objects.Zoom)) {
        Pos = Objects.Zoom.replace(/k/,"000");
  } else {
        Pos = Objects.Zoom.replace(/b/,"");
  }
  var start = (Objects.Pos-1)*Pos+1;
  var startrim = String( start ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
  var end = (Objects.Pos-1)*Pos+Pos*Objects.Block;
  var endtrim = String( end ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' );
  //$("#showPos").html("&nbsp;&nbsp;<span style=\"background:white;text-align:left;font-size:16px;font-family:Helvetica;\">&nbsp;"+Objects.Chr+":"+startrim+"-"+endtrim+"bp&nbsp;</span>&nbsp;<input type=\"text\" id=\"searchTrk\" name=\"ONDIALOG\" size=\"35\" placeholder=\"eg.Os01g0100100-01,chr01:1-100\"></input><button name=\"GO\" onclick=\"searchOnTrack();\">GO</button>");
  $("#showPos").html("&nbsp;&nbsp;<span style=\"text-align:left;font-size:16px;font-family:Helvetica;color:white;position:relative;top:5px\">&nbsp;"+Objects.Chr+":"+startrim+"-"+endtrim+"bp&nbsp;</span>&nbsp;<input type=\"text\" id=\"searchTrk\" name=\"ONDIALOG\" size=\"35\" placeholder=\"eg.Os01g0100100-01,chr01:1-100\" style=\"position:relative;top:2px\"></input><button name=\"GO\" onclick=\"searchOnTrack();\" style=\"position:relative;top:2px\">SEARCH</button>");
  localStorage.setItem("_nowPos",Objects.Chr+":"+startrim+"-"+endtrim+"bp");
  //$("#tasuke").css("min-width",CaWid+"px");
  $("#tasuke").css("min-width",parseInt(CaWid)+parseInt(20)+"px");
  //$("#content").css("min-width",CaWid+"px");
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var zm = _cvtZoom(en.nuc_max);
  if(!zm){zm=4000;}
  if (_cvtZoom(Objects.Zoom) > zm && Objects.Onebase=="on"){
    localStorage.setItem("_Onebase", "off");
    _drawCanvas();
  }
  _overWriteColorFromEnv();
  _setMinColor("snp");
  _setMinColor("indel");
  _setMenu();
  _hideLoading();
  _initCanvas();
  _drawTitle(null);
  _drawTOP();
  _drawRefName();
  _drawZoombar();
  _drawNULLBlock();
  if(phenotypeFlg){
	  if (localStorage.getItem('_Tpos') === undefined) {
	  	_drawPlot();
	  } else {
		_drawPlot(localStorage.getItem('_Tpos'));
	  }
/*
	  if (localStorage.getItem("_GWAS") == "off") {
                _drawPhyloName();
          }
*/
  } else {
	$("#track").css('border-bottom','1px #c3c3c3 solid');
  }
  if ( Objects.Snpblock == "off" ) {
    if(Objects.Onebase == "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,"ctx4") : _drawSNPBlock(3);
          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{
      switch (Objects.Mode) {
        case "dp":
          _drawDPBlock();
          $('#snpt').hide("slow");
          break;
        case "dp+s":
          _drawDPBlock();
          _drawGTSnp(0);
          $('#snpt').show("slow");
          break;
        case "dp+i":
          _drawDPBlock();
          _drawGTIns(0);
          _drawGTDel(0);
          $("#snpt").show("slow");
          break;
        case "dp+a":
          _drawDPBlock();
          _drawGTSnp(1);
          _drawGTIns(1);
          _drawGTDel(1);
          $("#snpt").show("slow");
          break;
        case "s":
          _drawGTSnp(0);
          $("#snpt").show("slow");
          break;
        case "i":
          _drawGTIns(0);
          _drawGTDel(0);
          $('#snpt').show("slow");
          break;
        case "si":
          _drawGTSnp(1);
          _drawGTIns(1);
          _drawGTDel(1);
          $("#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");
    }
  }
  // for draginw without indicator
  frameCellwoI=ctx4.getImageData(0, 0, cvs4.width, cvs4.height);
  // Indicator
  if ( Objects.Indicator == "on" ) {
    _drawIndicator();
    _drawDirection();
  } else{
    var element = document.getElementById("cvs_ind"); 
    element.style.width = '0px'; 
    element.style.height = '0px'; 
    $('#prm_idc').val("off");
  }

  // when canvas height is changed
  var crtCvs1H=cvs1.height;
  var prtMesFeatID=false;
  if(localStorage.getItem("_TrackID")=="on"){Objects.TrackH=_getTrack("view").length*80+1;}
  else{Objects.TrackH=_getTrack("view").length*40+1;}
  if ( Objects.Zoom == "1b" ) Objects.TrackH=Objects.TrackH+20;
  if ( Objects.Zoom == "1b" && Objects.Amino == "on" ) Objects.TrackH=Objects.TrackH+45;
  if(crtCvs1H != Objects.TrackH && Objects.Zoom != "1b"){
    prtMesFeatID=true;
    crtCvs1H = Objects.TrackH;
    _drawCanvas();
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("scroll", true, true);
    content.dispatchEvent(evt);
  }

  // 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);
  frameZoomb=ctx9.getImageData(0, 0, cvs9.width, cvs9.height);
  frameInd=ctx7.getImageData(0, 0, cvs7.width, cvs7.height);

  if(phenotypeFlg){
	  framePlot = ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
  }

  if(prtMesFeatID){
    _messageOnScreen("Viewing the feature ID was turned off");
    prtMesFeatID=false;
  }
  _setClickPhenotypeMainEvent();
  _checkInput();
  //_closeErr();
  //$('#content').css('min-width','');
  //$('#content').css('max-width',window.innerWidth - 38);
}

///////////////////////////// Drawing meter by _drawTOP()
function _drawMeter(pos,pointer) {
  var blk=Objects.Block;
  var end=pos+blk;
  var m=parseInt(blk/10);
  
  ctx2.clearRect(0, 27, cvs2.width, cvs2.height);

  // 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,50);
  ctx2.fillStyle=_setColor().meterstring;
  ctx2.textAlign="left";
  //ctx2.font="11px 'Century'";
  ctx2.font="11px 'Helvetica'";
  ctx2.fillText(_printPos(pos),2, 52);
  ctx2.textAlign="center";
  for (var i=1; i<m; i++) ctx2.fillText(_printPos(pos+parseInt(blk/m)*i),cvs2.width/m*i, 52);
  ctx2.textAlign="right";
  ctx2.fillText(_printPos(end),cvs2.width-2, 52);
  if ( pointer != null ) {
    if(pointer >=parseInt(cvs2.width/2)) {
    	ctx2.beginPath();
    	ctx2.moveTo(pointer,40);
    	ctx2.lineTo(pointer-10,28);
    	ctx2.lineTo(pointer-2,28);
    	ctx2.closePath();
    	ctx2.fillStyle=_setColor().pointercolor;
    	ctx2.fill();
   	ctx2.fillStyle=_setColor().pointerstringcolor;
    	ctx2.textAlign="right";
    	ctx2.fillText(_printPos(pos+parseInt(pointer/Objects.BlockW)), pointer-12, 36);
    } else {
        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(){
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  ctx2.clearRect(0, 0, cvs2.width, 30);
  o=_chromosome();
  ctx2.beginPath();
  if(o.centromere > 0){
    ctx2.moveTo(6,8);
    ctx2.lineTo(o.centromere-5,8);
    ctx2.lineTo(o.centromere+5,25);
    ctx2.lineTo(o.width-6, 25);
    ctx2.arcTo(o.width, 25, o.width, 20, 6);
    ctx2.lineTo(o.width, 17);
    ctx2.arcTo(o.width, 8, o.width-5, 8, 6);
    ctx2.lineTo(o.centromere+5,8);
    ctx2.lineTo(o.centromere-5,25);
    ctx2.lineTo(6,25);
    ctx2.arcTo(1, 25, 1, 16, 6);
    ctx2.lineTo(0, 15);
    ctx2.arcTo(1, 8, 6, 8, 6);
  } else {
    ctx2.moveTo(6,25);
    ctx2.lineTo(o.width-6, 25);
    ctx2.arcTo(o.width, 25, o.width, 20, 6);
    ctx2.lineTo(o.width, 17);
    ctx2.arcTo(o.width, 8, o.width-5, 8, 6);
    ctx2.lineTo(6,8);
    ctx2.arcTo(1, 8, 1, 14, 6);
    ctx2.lineTo(0, 17);
    ctx2.arcTo(1, 25, 6, 25, 6);	
  }
  ctx2.closePath();
  ctx2.fillStyle=_setColor().chrcolor;
  ctx2.fill();
  ctx2.lineWidth=1;
  ctx2.strokeStyle=_setColor().chrborder;
  ctx2.stroke();
  ctx2.fillStyle=_setColor().chrstringcolor;
  ctx2.font="12px 'Helvetica'";
  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, 9, o.area+1, 16);
  // 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.fillStyle=_setColor().detailstring;
  ctx2.font="11px 'Helvetica'";
  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 sequence name
function _drawRefName(){
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  ctx11.fillStyle=_setColor().reftitle;
  ctx11.font="14px 'Arial'";
  //ctx11.textAlign="center";
  ctx11.textAlign="left";
  if (Objects.titleWidth == 100) {
  	ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)-25, 11, 100);
  } else if (Objects.titleWidth == 120) {
  	ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)-15, 11, 100);
  } else if (Objects.titleWidth == 140) {
        ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)-5, 11, 100);
  } else if (Objects.titleWidth == 160) {
        ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)+5, 11, 100);
  } else if (Objects.titleWidth == 180) {
        ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)+15, 11, 100);
  } else if (Objects.titleWidth == 200) {
        ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)+25, 11, 100);
  } else if (Objects.titleWidth == 220) {
        ctx11.fillText(en.reference_name, parseInt(Objects.titleWidth/2)+35, 11, 100);
  }
}

///////////////////////////// Drawing tracks
function _drawTracks(fastaPos) {
  var to=new Object(JSON.parse(localStorage.getItem("_Tracks")));
  var to_prm=new Object(JSON.parse(localStorage.getItem("_Tracks_rpm")));
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var ta=_getTrack("view");
  var rowHeight=40;
  if (localStorage.getItem("_TrackID")=="on"){
    isConflict = _trackConflict();
    if(isConflict){
      localStorage.setItem("_TrackID", "off");
    }else{
      rowHeight=80;
    }
  }

  ctx0.clearRect(0, 0, cvs0.width, cvs0.height);
  ctx0.fillStyle="#dcdcdc";
  ctx0.fillRect(0, 0, cvs0.width, cvs0.height);
  ctx1.clearRect(0, 0, cvs1.width, cvs1.height);
  ctx0.fillStyle=_setColor().tracktitle;
  ctx0.textAlign="right";
  ctx0.font="12px 'Arial'";
  ctx1.textAlign="center";
  ctx1.font="10px 'Arial'";
  // 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*rowHeight+10);   // Title
        //_drawTrack("_Track_"+j,i,fastaPos,to[j].h,to[j].c,to[j].t,rowHeight); // Track
	if(to[j].track=="Primer3 Result"){
           _drawTrack("_Track_prm",i,fastaPos,to[j].h,to[j].c,to[j].t,rowHeight);

         }else{
           _drawTrack("_Track_"+j,i,fastaPos,to[j].h,to[j].c,to[j].t,rowHeight); // Track
         }
      }
    }
  }
    // References
  if ( Objects.Zoom == '1b' ) {
    if ( localStorage.getItem('_Ref') == "Reference" ) {
      //ctx0.font="Bold italic 13px 'Courier'";
      ctx0.font="Bold 13px 'Arial'";
      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.font = "12px 'Arial'";
      ctx0.fillText("Amino acids", cvs0.width-5, cvs0.height-35);
      _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 rowHeight=40;
  if(localStorage.getItem("_TrackID")=="on"){rowHeight=80;}
  var m=parseInt(Objects.Block/(rowHeight/4));

  for(i=0;i<m+1;i++){
            if (i==0 || i==m) {
                ctx1.beginPath();
                ctx1.moveTo(Objects.canvasWidth/ m * i, 0);
		if(localStorage.getItem("_Track_prm") !== undefined){
                	ctx1.lineTo(Objects.canvasWidth/ m * i, 100);
		} else {
                	ctx1.lineTo(Objects.canvasWidth/ m * i, 80);
		}
                ctx1.lineWidth = 6;
                ctx1.strokeStyle = "rgba(" + [208,208,208,0.5] + ")";
                ctx1.stroke();
            } else {
                ctx1.beginPath();
                ctx1.moveTo(Objects.canvasWidth/ m * i, 0);
		if(localStorage.getItem("_Track_prm") !== undefined){
                        ctx1.lineTo(Objects.canvasWidth/ m * i, 100);
                } else {
                	ctx1.lineTo(Objects.canvasWidth/ m * i, 80);
		}
                ctx1.lineWidth = 0.2;
                //ctx1.strokeStyle = "black";
		ctx1.strokeStyle = "rgba(" + [26,26,26,0.5] + ")";
        	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.lineWidth=3;
            ctx1.strokeStyle="green";
            ctx1.strokeRect(e*Objects.BlockW+1, yPos-10, Objects.BlockW*3-2, 13);
          } else if ( aStr == "*" ) {
            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,type,rowHeight) {
  var yP=hir*rowHeight;
  var eachRowHeight=rowHeight/4;
  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) > 4000 || depth == 1 ) Hs=2;
    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)*eachRowHeight-1, (o[k].re-o[k].rs+1)*Objects.BlockW+6, yH+2);
    }
    if(o[k].t.match(/target/)) {
	var transcript=o[k].t.split(";");
        for (var m=0;m<transcript.length;m++) {
                var transcripts=transcript[m].split("-");
                if ( transcripts[0] == "lPrm" ) {
                        ctx1.fillStyle="#ff6699";
                } else if( transcripts[0] == "target" ){
                        ctx1.fillStyle="#ff0000";
                } else if( transcripts[0] == "rPrm" ){
                        ctx1.fillStyle="#0099ff";
                }
                ctx1.fillRect(startS*Objects.BlockW+(width*(transcripts[1])/100)
,yP+(Hs-1)*eachRowHeight,width*(transcripts[2]/100),yH);
        }
    }
    // Without transcripts
    if ( _isEmpty(o[k].t))  {
      ctx1.fillStyle=color;
      ctx1.fillRect(startS*Objects.BlockW, yP+(Hs-1)*eachRowHeight, width, yH);
    } else if (o[k].t.match(/target/)) {
    } else {// Transcripts
      ctx1.strokeStyle="#000000";
      ctx1.beginPath();
      ctx1.moveTo(startS*Objects.BlockW, yP+(Hs-1)*eachRowHeight+4);
      ctx1.lineTo(startE*Objects.BlockW, yP+(Hs-1)*eachRowHeight+4);
      ctx1.stroke();
      var transcript=o[k].t.split(";");
      var utrs = [];
      var exons = [];
      var cdss = [];
      var target = [];
      for(var n=0;n<transcript.length;n++) {
        if(transcript[n].match(/^u/)) {
                utrs.push(transcript[n]);
        } else if (transcript[n].match(/^a/)) {
                exons.push(transcript[n]);
        } else if (transcript[n].match(/^c/)) {
                cdss.push(transcript[n]);
	}
      }
/*
      if(o[k].t.match(/target/)) {
	for (var m=0;m<transcript.length;m++) {
		var transcripts=transcript[m].split("-");
		if ( transcripts[0] == "lPrm" ) {
			ctx1.fillStyle="#ff6699";
		} else if( transcripts[0] == "target" ){
			ctx1.fillStyle="#ff0000";
		} else if( transcripts[0] == "rPrm" ){
			ctx1.fillStyle="#0099ff";
		}
		ctx1.fillRect(startS*Objects.BlockW+(width*(transcripts[1])/100),yP+(Hs-1)*eachRowHeight,width*(transcripts[2]/100),yH);
	}
      }
*/
      //配列を再度結合
      transcript = [];
      transcript = transcript.concat(exons).concat(cdss).concat(utrs);
      
      for (var m=0;m<transcript.length;m++) {
        var transcripts=transcript[m].split("-");
        if ( transcripts[0] == "u" ) {
          ctx1.fillStyle="sandybrown";
        } else if( transcripts[0] == "c" ){
          ctx1.fillStyle=color;
        } else if( transcripts[0] == "a" ){
          ctx1.fillStyle="green";
        }
        ctx1.fillRect(startS*Objects.BlockW+(width*(transcripts[1])/100),yP+(Hs-1)*eachRowHeight,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)*eachRowHeight+4);
        ctx1.lineTo(startE*Objects.BlockW+7, yP+(Hs-1)*eachRowHeight+4);
        ctx1.moveTo(startE*Objects.BlockW+4, yP+(Hs-1)*eachRowHeight);
        ctx1.lineTo(startE*Objects.BlockW+7, yP+(Hs-1)*eachRowHeight+4);
        ctx1.lineTo(startE*Objects.BlockW+4, yP+(Hs-1)*eachRowHeight+7);
      } else {
        ctx1.moveTo(startS*Objects.BlockW, yP+(Hs-1)*eachRowHeight+4);
        ctx1.lineTo(startS*Objects.BlockW-7, yP+(Hs-1)*eachRowHeight+4);
        ctx1.moveTo(startS*Objects.BlockW-4, yP+(Hs-1)*eachRowHeight);
        ctx1.lineTo(startS*Objects.BlockW-7, yP+(Hs-1)*eachRowHeight+4);
        ctx1.lineTo(startS*Objects.BlockW-4, yP+(Hs-1)*eachRowHeight+7);
      }
      ctx1.stroke();
    }
    if(type=="DE"){
      /*
      console.log("!");
      ctx1.beginPath();
      ctx1.moveTo(startE*Objects.BlockW+10, yP+(Hs-1)*eachRowHeight);
      ctx1.lineTo(startE*Objects.BlockW, yP+(Hs-1)*eachRowHeight+parseInt(yH/2));
      ctx1.lineTo(startE*Objects.BlockW+10, yP+(Hs-1)*eachRowHeight+yH);
      ctx1.closePath();
      ctx1.fill();
      */
    }
    if(localStorage.getItem("_TrackID") == "on" && _cvtZoom(Objects.Zoom) < 5000 ){
      ctx1.textAlign="left";
      var metrics = ctx1.measureText(o[k].id);
      if(metrics.width>100){metrics.width=100;}
      ctx1.fillStyle=_setColor().bgcolor;
      ctx1.fillRect((startS*Objects.BlockW),yP+(Hs*eachRowHeight)-12,metrics.width,10);
      ctx1.fillStyle=_setColor().locusid;
      ctx1.fillText(o[k].id,(startS*Objects.BlockW),yP+(Hs*eachRowHeight)-2,metrics.width);
    }
  }
}

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

var ONINFOCELL=new Object();
var CELLINFODRAW;
var THISACC;
/////////////////////////////////////////////// Detail of cell
function _drawInfoCell(id,b,y,str){
  // Clear canvas
  ctx4.putImageData(frameCell, 0, 0);
  if(phenotypeFlg) {
    ctx12.putImageData(framePlot, 0, 0);
  }
  // Position
  var ao=new Object(JSON.parse(_getCompressedData(id)));
  var o=new Object(JSON.parse(str));
  CELLINFODRAW = Object(JSON.parse(str));
  var xo=b*Objects.BlockW;
  var yo=parseInt(y/Objects.BlockH)*Objects.BlockH;
  var yi=5;
  var xi=5;
  var width=460;
  var cstm=localStorage.getItem("_CSTM");
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var elementView = document.getElementById("cvs_view");
  var bounds = elementView.getBoundingClientRect(); 
  var boux = bounds.left;
  var bouy = bounds.top;
  var element = document.getElementById("cellinf"); 
  element.style.top = (parseInt(bouy)+parseInt(yo)+Objects.BlockH+(document.body.scrollTop || document.documentElement.scrollTop))+'px'; 
  if(((parseInt(boux)+parseInt(xo)+Objects.BlockW)+420+(document.body.scrollLeft || document.documentElement.scrollLeft)) > (Objects.BlockW*(Objects.Block+2))+Objects.titleWidth){
    element.style.left = (parseInt(boux)+parseInt(xo)-(Objects.BlockW)-420+(document.body.scrollLeft || document.documentElement.scrollLeft))+'px'; 
  }else{
    element.style.left = (parseInt(boux)+parseInt(xo)+Objects.BlockW+(document.body.scrollLeft || document.documentElement.scrollLeft))+'px'; 
  }
  
  var cnt=0;
  for(var i in o){cnt++;}
  if(_cvtZoom(Objects.Zoom)>4000 || localStorage.getItem("_Ref") != "Reference"){
    if ( _isEmpty(ao[b].s) && _isEmpty(ao[b].i) && _isEmpty(ao[b].d) ){
      cvs10.height = 40;
    }else{
      cvs10.height = 75;
    }
  }else{
    if(cnt>1){
      cvs10.height = (65+(cnt*17));
    }else{
      cvs10.height = 40;
    }
  }
  cvs10.width=470;
  ctx10.clearRect(0, 0, cvs10.width, cvs10.height);
  ctx10.fillStyle='rgba(0,0,0,0)';
  ctx10.fillRect(0,0,cvs10.width,cvs10.height);

  // Range of cell
  var strRange="";
  THISACC = Objects.db[parseInt(y/Objects.BlockH)];
  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)+"]";

  // 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
  ctx10.strokeStyle="#b0c4de";
  ctx10.fillStyle="#ffffff";
  ctx10.textAlign="left";
  //ctx10.font="10px 'Courier'";
  ctx10.font = "11px 'Century'";
  ctx10.lineWidth=5;

  // prepared string
  var condArray = localStorage.getItem("_CrtCondition").split("|");
  var cond = parseInt(condArray[0]);
  var splitted_rdp;
  if(_isUndefined(ao[b].rdp)){
    splitted_rdp = "";
  }else{
    splitted_rdp = ao[b].rdp.split("%");
  }
  //var splitted_rdp = ao[b].rdp.split("%");
  var cstm_name = "";
  //if(Objects.Conditions.length > 1){
  //  cstm_name = _escapeHTML(en.cstm_kind)+":"+Objects.Conditions[cond].id.substr(0, 10);
  //}else{
    cstm_name = _escapeHTML(en.cstm_kind);
  //}
  var strCSTMPri=" "+cstm_name+" is "+splitted_rdp[cond]+".";
  var strCSTM = cstm_name+":";
  for(var a=0; a<Objects.Conditions.length; a++){
    if ( !_isEmpty(splitted_rdp[a]) ) {
      strCSTM += Objects.Conditions[a].id+"="+splitted_rdp[a];
    }else{
      
      strCSTM += Objects.Conditions[a].id+"=empty";
    }
    if(a<Objects.Conditions.length-1){strCSTM += ", "}
  }
  var infoCellStrBoth=" &lt;Depth is "+ao[b].dp+".&gt; &lt;"+strCSTM+"&gt;<br><br>";
  
  if (_isEmpty(ao[b].dp)){ // NULL
    ctx10.fillRect(xi,yi,width,30);
    ctx10.strokeRect(xi,yi,width,30);
    ctx10.fillStyle="#000000";
    if(cstm=="off" || cstm=="disabled"){
      ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
      ONINFOCELL.str=strRange+" Depth is empty.<br><br>";
    }else{
      if ( !_isEmpty(splitted_rdp[cond]) ) {
        if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
          ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is empty.&gt; &lt;"+strCSTM+".&gt;<br><br>";
        }else{
          ctx10.fillText(strRange,xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is empty.&gt; <br><br>";
        }
      }else{
        ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
        ONINFOCELL.str=strRange+" &lt;Depth is empty.&gt; &lt;"+strCSTM+".&gt;<br><br>";
      }
    }
    ONINFOCELL.h=30;
  }else if(localStorage.getItem("_Ref") != "Reference"){
    if ( _isEmpty(ao[b].s) && _isEmpty(ao[b].i) && _isEmpty(ao[b].d) ) {
      ctx10.fillRect(xi,yi,width,30);
      ctx10.strokeRect(xi,yi,width,30);
      ctx10.fillStyle="#000000";
      if(ao[b].dp != "n" && ao[b].dp != "x"){
      if(cstm=="off" || cstm=="disabled"){
        ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
        ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
            ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
            ONINFOCELL.str=strRange+infoCellStrBoth;
          }else{
            ctx10.fillText(strRange,xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; <br><br>";
          }
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt; "+strCSTM+" &gt;<br><br>";
        }
      }
    }else{
      if ( !_isEmpty(splitted_rdp[cond]) ) {
        if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
          ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt; "+strCSTM+".&gt;<br><br>";
        }else{
          ctx10.fillText(strRange,xi+10,yi+18);
          ONINFOCELL.str=strRange+"<br><br>";
        }
      }else{
        ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
        ONINFOCELL.str=strRange+" &lt; "+strCSTM+" &gt;<br><br>";
      }
    }
    ONINFOCELL.h=30;
    }else{//[list03: 938,001 .. 939,000] <Depth is 7.> < value is 0.>
      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("-");
      ctx10.fillRect(xi,yi,width,65);
      ctx10.strokeRect(xi,yi,width,65);
      ctx10.fillStyle="#000000";
      if(ao[b].dp != "n" && ao[b].dp != "x"){
        if(cstm=="off" || cstm=="disabled"){
          ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
          ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
        }else{
          if ( !_isEmpty(splitted_rdp[cond]) ) {
            if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
              ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
              ONINFOCELL.str=strRange+infoCellStrBoth;
            }else{
              ctx10.fillText(strRange,xi+10,yi+18);
              ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; <br><br>";
            }
          }else{
            ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; <br><br>";
          }
        }
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
            ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
            ONINFOCELL.str=strRange+"&lt;"+strCSTM+".&gt;<br><br>";
          }else{
            ctx10.fillText(strRange,xi+10,yi+18);
            ONINFOCELL.str=strRange+"<br><br>";
          }
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt; "+strCSTM+" .&gt;<br><br>";
        }
      }
      ONINFOCELL.h=50;
      if ( !_isEmpty(st) ) {
        if(parseInt(st[0])>_getMaxGraSNP()){
          ctx10.fillStyle=grad_S(1);
        } else {
          ctx10.fillStyle=grad_S(parseInt(st[0])/_getMaxGraSNP());
        }
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("SNP="+st[0],xi+27,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.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()){
          ctx10.fillStyle=grad_INDEL(1);
        } else {
          ctx10.fillStyle=grad_INDEL(sum/_getMaxGraINDEL());
        }
        ctx10.fillRect(xi+75,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+75,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL="+sum,xi+89,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+75,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+75,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL=0",xi+89,yi+38);
      }
      ctx10.fillText("(Only the number of variants are displayed.)",xi+8,yi+55);
    }
  } else if (!o.length && !_isEmpty(ao[b].dp) && _cvtZoom(Objects.Zoom)<=4000){ // DEPTH only
    ctx10.fillRect(xi,yi,width,30);
    ctx10.strokeRect(xi,yi,width,30);
    ctx10.fillStyle="#000000";
    if(ao[b].dp != "n" && ao[b].dp != "x"){
      if(cstm=="off" || cstm=="disabled"){
        ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
        ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
          ONINFOCELL.str=strRange+infoCellStrBoth;
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt; "+strCSTM+" &gt;<br><br>";
        }
      }
    }else{
      if(cstm=="off" || cstm=="disabled"){
        ctx10.fillText(strRange,xi+10,yi+18);
        ONINFOCELL.str=strRange+"<br><br>";
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
            ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
            ONINFOCELL.str=strRange+strCSTM+".&gt;<br><br>";
          }else{
            ctx10.fillText(strRange,xi+10,yi+18);
            ONINFOCELL.str=strRange+"<br><br>";
          }
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt; "+strCSTM+" &gt;<br><br>";
        }
      }
    }
    ONINFOCELL.h=30;
  }else if ( _cvtZoom(Objects.Zoom)>4000 ) {
    if ( _isEmpty(ao[b].s) && _isEmpty(ao[b].i) && _isEmpty(ao[b].d) ) {
      ctx10.fillRect(xi,yi,width,30);
      ctx10.strokeRect(xi,yi,width,30);
      ctx10.fillStyle="#000000";
      if(ao[b].dp != "n" && ao[b].dp != "x"){
        if(cstm=="off" || cstm=="disabled"){
          ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
          ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
        }else{
          if ( !_isEmpty(splitted_rdp[cond]) ) {
            if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
              ctx10.fillText(strRange+strCSTM,xi+10,yi+18);
              ONINFOCELL.str=strRange+infoCellStrBoth;
            }else{
              ctx10.fillText(strRange,xi+10,yi+18);
              ONINFOCELL.str=strRange+"<br><br>";
            }
          }else{
            ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt; "+strCSTM+" &gt;<br><br>";
          }
        }
      }else{
        if(cstm=="off" || cstm=="disabled"){
          ctx10.fillText(strRange,xi+10,yi+18);
          ONINFOCELL.str=strRange+"<br><br>";
        }else{
          if ( !_isEmpty(splitted_rdp[cond]) ) {
            if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
              ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
              ONINFOCELL.str=strRange+strCSTM+".&gt;<br><br>";
            }else{
              ctx10.fillText(strRange,xi+10,yi+18);
              ONINFOCELL.str=strRange+"<br><br>";
            }
          }else{
            ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt; "+strCSTM+" &gt;<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("-");
      ctx10.fillRect(xi,yi,width,65);
      ctx10.strokeRect(xi,yi,width,65);
      ctx10.fillStyle="#000000";
        
      if(ao[b].dp != "n" && ao[b].dp != "x"){
        if(cstm=="off" || cstm=="disabled"){
          ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
          ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
        }else{
          if ( !_isEmpty(splitted_rdp[cond]) ) {
            if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
              ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
              ONINFOCELL.str=strRange+infoCellStrBoth;
            }else{
              ctx10.fillText(strRange,xi+10,yi+18);
              ONINFOCELL.str=strRange+"<br><br>";
            }
          }else{
            ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt; "+strCSTM+" &gt;<br><br>";
          }
        }
      }else{
        if(cstm=="off" || cstm=="disabled"){
          ctx10.fillText(strRange,xi+10,yi+18);
          ONINFOCELL.str=strRange+"<br><br>";
        }else{
          if ( !_isEmpty(splitted_rdp[cond]) ) {
            if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
              ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
              ONINFOCELL.str=strRange+strCSTM+".&gt;<br><br>";
            }else{
              ctx10.fillText(strRange,xi+10,yi+18);
              ONINFOCELL.str=strRange+"<br><br>";
            }
          }else{
            ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt; "+strCSTM+" &gt;<br><br>";
          }
        }
      }
      ONINFOCELL.h=50;
      if ( !_isEmpty(st) ) {
        if(parseInt(st[0])>_getMaxGraSNP()){
          ctx10.fillStyle=grad_S(1);
        } else {
          ctx10.fillStyle=grad_S(parseInt(st[0])/_getMaxGraSNP());
        }
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#SNP="+st[0],xi+27,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.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()){
          ctx10.fillStyle=grad_INDEL(1);
        } else {
          ctx10.fillStyle=grad_INDEL(sum/_getMaxGraINDEL());
        }
        ctx10.fillRect(xi+85,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+85,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#INDEL="+sum,xi+99,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+85,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+85,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#INDEL=0",xi+99,yi+38);
      }
    }
    if ( Objects.Eff == "on" ) {
      ctx10.fillStyle="blue";
      ctx10.fillText("snpEff: ",xi+170,yi+38);
      if ( !_isEmpty(st) ) {
        var color="";
        if (parseInt(st[1])==0) color="#00BFFF";
        if (parseInt(st[1])==1) color="#00BFFF";
        if (parseInt(st[1])==2) color="#00BFFF";
        if (parseInt(st[1])==3) color="#FFFF00";
        if (parseInt(st[1])==4) color="#EE9A00";
        //if (parseInt(st[1])==5) color="#8B0000";
        if (parseInt(st[1])==5) color="red";
/*
	if (parseInt(st[1])==0) color="#00BFFF";
	if (parseInt(st[1])==1) color="#FFFF00";
	if (parseInt(st[1])==2) color="#EE9A00";
	if (parseInt(st[1])==3) color="red";
*/ 
        var effstr;
        if (st[1] == 0 || st[1] == 1 || st[1] == 2) {
                effstr = "MODIFIER";
        } else if (st[1] == 3) {
                effstr = "LOW";
        } else if (st[1] == 4) {
                effstr = "MODERATE";
        } else if (st[1] == 5) {
                effstr = "HIGH";
        }  
        ctx10.fillStyle=color;
        ctx10.fillRect(xi+210,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+210,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText(effstr,xi+255,yi+38);
        ctx10.fillStyle="#000";
        ctx10.fillText("SNP=",xi+225,yi+38);

      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+210,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+210,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("SNP 0",xi+225,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="#00BFFF";
        if (max==3) color="#FFFF00";
        if (max==4) color="#EE9A00";
        //if (max==5) color="#8B0000";
        if (max==5) color="red";
/*
	if (max==0) color="#00BFFF";
	if (max==1) color="#FFFF00";
	if (max==2) color="#EE9A00";
	if (max==3) color="red";
*/
        var effstr;
        if (max == 0 || max == 1 || max == 2) {
                effstr = "MODIFIER";
        } else if (max == 3) {
                effstr = "LOW";
        } else if (max == 4) {
                effstr = "MODERATE";
        } else if (max == 5) {
                effstr = "HIGH";
        }
        ctx10.fillStyle=color;
        ctx10.fillRect(xi+325,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+325,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText(effstr,xi+385,yi+38);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL= ",xi+340,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+325,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+325,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL 0",xi+340,yi+38);
      }
    }
    ctx10.fillText("(Only the number of variants are displayed.)",xi+8,yi+55);
  } else if (o.length && !_isEmpty(ao[b].dp)) {// Variants
    ctx10.fillRect(xi,yi,width,o.length*17+70);
    ctx10.strokeRect(xi,yi,width,o.length*17+70);
    ctx10.fillStyle="#000000";
    if(ao[b].dp != "n" && ao[b].dp != "x"){
      if(cstm=="off" || cstm=="disabled"){
        ctx10.fillText(strRange+" Depth is "+ao[b].dp+".",xi+10,yi+18);
        ONINFOCELL.str=strRange+" Depth is "+ao[b].dp+".<br><br>";
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt;"+strCSTM+"&gt;<br><br>";
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt;Depth is "+ao[b].dp+".&gt; &lt;"+strCSTM+"&gt;<br><br>";
        }
      }
    }else{
      if(cstm=="off" || cstm=="disabled"){
        ctx10.fillText(strRange,xi+10,yi+18);
        ONINFOCELL.str=strRange+"<br><br>";
      }else{
        if ( !_isEmpty(splitted_rdp[cond]) ) {
          if(splitted_rdp[cond] != "n" && splitted_rdp[cond] != "x"){
            ctx10.fillText(strRange+strCSTMPri,xi+10,yi+18);
            ONINFOCELL.str=strRange+" &lt; "+strCSTM+"&gt;<br><br>";
          }else{
            ctx10.fillText(strRange,xi+10,yi+18);
            ONINFOCELL.str=strRange+"<br><br>";
          }
        }else{
          ctx10.fillText(strRange+" is empty.",xi+10,yi+18);
          ONINFOCELL.str=strRange+" &lt; "+strCSTM+"&gt;<br><br>";
        }
      }
    }
    if(o[0].eff != ""){
      if(chDtlCellView=="pos"){
        ONINFOCELL.str=ONINFOCELL.str+"<div id=\"chfmt\" align=right><button type=\"submit\" onClick=\"_changeFmtPos();\" >Change to each id</button></div>";
      }else{
        ONINFOCELL.str=ONINFOCELL.str+"<div id=\"chfmt\" align=right><button type=\"submit\" onClick=\"_changeFmtPos();\" >Change to each variants</button></div>";
      }
    }
    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()){
          ctx10.fillStyle=grad_S(1);
        } else {
          ctx10.fillStyle=grad_S(parseInt(st[0])/_getMaxGraSNP());
        }
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#SNP="+st[0],xi+27,yi+38);
    } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+13,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+13,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.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()){
          ctx10.fillStyle=grad_INDEL(1);
        } else {
          ctx10.fillStyle=grad_INDEL(sum/_getMaxGraINDEL());
        }
        ctx10.fillRect(xi+85,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+85,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#INDEL="+sum,xi+99,yi+38);
    } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+85,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+85,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("#INDEL=0",xi+99,yi+38);
    }
    if ( Objects.Eff == "on" ) {
      ctx10.fillStyle="blue";
      ctx10.fillText("snpEff: ",xi+165,yi+38);
      if ( !_isEmpty(st) ) {
        var color="";
	var num = parseInt(st[1]);

        if (parseInt(st[1])==0) color="#00BFFF";
        if (parseInt(st[1])==1) color="#00BFFF";
        if (parseInt(st[1])==2) color="#00BFFF";
        if (parseInt(st[1])==3) color="#FFFF00";
        if (parseInt(st[1])==4) color="#EE9A00";
        //if (parseInt(st[1])==5) color="#8B0000";
        if (parseInt(st[1])==5) color="red";
/*
	if (parseInt(st[1])==0) color="#00BFFF";
	if (parseInt(st[1])==1) color="#FFFF00";
	if (parseInt(st[1])==2) color="#EE9A00";
	if (parseInt(st[1])==3) color="red";
*/
        //var num = st[1];
        if (color == ""){
          num=0;
          color="#fff";
        }
	var effstr;
	if (st[1] == 0 || st[1] == 1 || st[1] == 2 ) {
		effstr = "MODIFIER";
	} else if (st[1] == 3) {
		effstr = "LOW";
        } else if (st[1] == 4) {
                effstr = "MODERATE";
        } else if (st[1] == 5) {
                effstr = "HIGH";
	}
        ctx10.fillStyle=color;
        ctx10.fillRect(xi+205,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+205,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText(effstr,xi+250,yi+38);
        ctx10.fillStyle="#000";
        ctx10.fillText("SNP=",xi+220,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+205,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+205,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.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="#00BFFF";
        if (max==1) color="#00BFFF";
        if (max==2) color="#00BFFF";
        if (max==3) color="#FFFF00";
        if (max==4) color="#EE9A00";
        //if (max==5) color="#8B0000";
        if (max==5) color="red";
/*
	if (max==0) color="#00BFFF";
	if (max==1) color="#FFFF00";
	if (max==2) color="#EE9A00";
	if (max==3) color="red";
*/
/*
        if (!max) {
          color="#fff";
          max=0;
        }
*/
        var effstr;
        if (max == 0 || max == 1 || max == 2 ) {
                effstr = "MODIFIER";
        } else if (max == 3) {
                effstr = "LOW";
        } else if (max == 4) {
                effstr = "MODERATE";
        } else if (max == 5) {
                effstr = "HIGH";
        }
        ctx10.fillStyle=color;
        ctx10.fillRect(xi+325,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+325,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText(effstr,xi+385,yi+38);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL= ",xi+340,yi+38);
      } else {
        ctx10.fillStyle="#fff";
        ctx10.fillRect(xi+325,yi+30,10,10);
        ctx10.strokeStyle="#000";
        ctx10.lineWidth=1;
        ctx10.strokeRect(xi+325,yi+30,10,10);
        ctx10.fillStyle="#000";
        ctx10.fillText("INDEL 0",xi+340,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){
          ctx10.fillStyle="blue";
          ctx10.fillText("Snpblock: "+st[0]+"/"+_cvtZoom(Objects.Zoom)+">="+cmp,xi+150,yi+38);
        }
      }
    }
    chDtlCellView="pos";
    ONINFOCELL.each="";
    ONINFOCELL.str=ONINFOCELL.str+"<span id=cellDigInfo>";
    ctx10.fillStyle="brown";
    if(o[0].eff != ""){
    	ctx10.fillText($.format("%1$5s %2$15s %3$15s %4$15s %5$15s %6$15s %7$15s","POS","TYPE","REF","ALT","GT","QUAL","snpEff"),xi+7,yi+60);
    } else {
    	ctx10.fillText($.format("%1$10s %2$10s %3$10s %4$10s %5$10s %6$10s","POS","TYPE","REF","ALT","GT","QUAL"),xi+7,yi+60);
    }
    var string="";
    string = "<table class = \"cellDigInfoTd\" width=\"100%\" style=\"margin-top: 10px; margin-bottom: 20px;\" border=\"1\" bordercolor=\"#DDDDDD\"> \
         <tr bgcolor=\"#CCCCCC\" style=\"height: 20px;\" ><td width=\"8%\">Position</td><td width=\"5%\">TYPE</td width=\"4%\"><td width=\"4%\">REF</td>\
         <td width=\"4%\">ALT</td><td width=\"4%\">GT</td><td width=\"5%\">QUAL</td>";
    if(o[0].eff != ""){
      string=string+"<td width=\"60%\">snpEff</td><td width=\"10%\"></td></tr>";
    }else{
      string=string+"<td width=\"60%\">snpEff</td><td width=\"10%\"></td></tr>";
    }
    var effclr = {INTERGENIC:'#00BFFF',UPSTREAM:'#00BFFF',DOWNSTREAM:'#00BFFF',UTR_5_PRIME:'#00BFFF',UTR_3_PRIME:'#00BFFF',REGULATION:'#00BFFF',INTRAGENIC:'#00BFFF',GENE:'#00BFFF',INTRON_CONSERVED:'#00BFFF',INTRON:'#00BFFF',INTERGENIC_CONSERVED:'#00BFFF',SYNONYMOUS_START:'#FFFF00',NON_SYNONYMOUS_START:'#FFFF00',START_GAINED:'#FFFF00',SYNONYMOUS_CODING:'#FFFF00',SYNONYMOUS_STOP:'#FFFF00',EXON:'#FFFF00',CDS:'#FFFF00',TRANSCRIPT:'#FFFF00',CHROMOSOME_LARGE_DUPLICATION:'#FFFF00',SPLICE_SITE_REGION:'#FFFF00',SPLICE_SITE_BRANCH:'#FFFF00',SPLICE_SITE_BRANCH_U12:'#FFFF00',MICRO_RNA:'#FFFF00',NON_SYNONYMOUS_STOP:'#FFFF00',NON_SYNONYMOUS_CODING:'#EE9A00',CODON_CHANGE:'#EE9A00',CODON_INSERTION:'#EE9A00',CODON_CHANGE_PLUS_CODON_INSERTION:'#EE9A00',CODON_DELETION:'#EE9A00',CODON_CHANGE_PLUS_CODON_DELETION:'#EE9A00',UTR_5_DELETED:'#EE9A00',UTR_3_DELETED:'#EE9A00',CHROMOSOME_LARGE_INVERSION:'#EE9A00',NEXT_PROT:'#EE9A00',SPLICE_SITE_ACCEPTOR:'red',SPLICE_SITE_DONOR:'red',START_LOST:'red',EXON_DELETED:'red',FRAME_SHIFT:'red',STOP_GAINED:'red',STOP_LOST:'red',RARE_AMINO_ACID:'red',CHROMOSOME_LARGEDELETION:'red',EXON_DELETED_PARTIAL:'red',EXON_DUPLICATION:'red',EXON_DUPLICATION_PARTIAL:'red',EXON_INVERSION:'red',EXON_INVERSION_PARTIAL:'red',GENE_DELETED:'red',GENE_DUPLICATION:'red',GENE_FUSION:'red',GENE_FUSION_HALF:'red',GENE_FUSION_REVERESE:'red',GENE_REARRANGEMENT:'red',PROTEIN_PROTEIN_INTERACTION_LOCUS:'red',PROTEIN_STRUCTURAL_INTERACTION_LOCUS:'red',TRANSCRIPT_DELETED:'red'};
    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);
      var pos = o[i].pos;
      var variant = o[i].variant;
      var ref = o[i].ref;
      var reflen = ref.length;
      if (reflen > 7 ) {
        var refpart = ref.substr(0,6);
        ref = refpart+"..."
      }
      var alt = o[i].alt;
      var altlen = alt.length;
      if (altlen > 7 ) {
        var altpart = alt.substr(0,6);
        alt = altpart+"..."
      }
      var gt = o[i].gt;
      var qual = o[i].qual;
      ctx10.fillStyle="#000";
      ctx10.fillFont="Alial";
      //ctx10.fillText(st.substr(0,55),xi+7,yi-10+(i+1)*17+70);
      ctx10.fillText(pos,xi+13,yi-10+(i+1)*17+70);
      ctx10.fillText(variant,xi+73,yi-10+(i+1)*17+70);
      ctx10.fillText(ref,xi+143,yi-10+(i+1)*17+70);
      ctx10.fillText(alt,xi+205,yi-10+(i+1)*17+70);
      ctx10.fillText(gt,xi+273,yi-10+(i+1)*17+70);
      ctx10.fillText(qual,xi+325,yi-10+(i+1)*17+70);
      if(o[i].eff != ""){
	var effs = Array();
	var efftrim = Array();
	var effinfos = o[i].eff.split(",");
	for(en = 0;en<effinfos.length;en++) {
		var efftmp = effinfos[en].split("(");
		var effpls = efftmp[0].split("+");
		efftmp[0] = effpls[0];
		effs.push(effclr[efftmp[0]]);
	}
	var efftrim = Array.from(new Set(effs));
	for(clr=0;clr<efftrim.length;clr++) {
        	ctx10.fillStyle=efftrim[clr];
        	//ctx10.fillRect(xi+7+300+10*clr,yi-10+(i+1)*17+60,7.5,10);
        	ctx10.fillRect(xi+7+380+10*clr,yi-10+(i+1)*17+60,7.5,10);
        }
      }	
      var targetend=+parseInt(o[i].pos)+parseInt(o[i].ref.length)-1;
      var target = THISACC+"---BLS---"+o[i].pos+"---BLS---"+targetend+"---BLS---"+o[i].variant;
      var effall = o[i].eff.split(",");
      string=string+"<tr style=\"height: 20px;\"><td width=\"8%\">"+o[i].pos+"</td>\
              <td width=\"5%\">"+o[i].variant+"</td><td width=\"4%\">"+o[i].ref+"</td><td width=\"4%\">"+o[i].alt+"</td>\
              <td width=\"4%\">"+o[i].gt+"</td><td width=\"5%\">"+o[i].qual+"</td>";
      if(o[i].eff != ""){
      for (var x=0; x<effall.length; x++) {
      var col="#7fffd4";
      var font="black";
      var addclass="class = cellTdBlank";
      var effEach = effall[x].split("|");
      var eff = effEach[1].split("(");
      switch(parseInt(effEach[0])){
        case 0:
          col="#00BFFF";
          break;
        case 1:
          col="#00BFFF";
          break;
        case 2:
          col="#00BFFF";
          font="white";
          break;
        case 3:
         col="#FFFF00";
          break;
        case 4:
          col="#EE9A00";
          break;
        case 5:
          //col="#8B0000";
          col="red";
          font="white";
          break;
        default:
          col="#7fffd4";
          break;
/*
        case 0:
          col="#00BFFF";
          break;
        case 1:
          col="#FFFF00";
          break;
        case 2:
          col="#EE9A00";
          break;
        case 3:
          col="red";
          font="white";
          break;
*/
      }
      if(x > 0){
        string=string+"<tr style=\"height: 20px;\"><td class = cellTdBlank width=\"8%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
        <td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
        <td width=\"60%\">"+effall[x].replace(/^\d|(.*)/,"$1")+"</td><td width=\"10%\" class = cellTdBlank></td></tr>";
      }else{
        string=string+"<td width=\"60%\">"+effall[x].replace(/^\d|(.*)/,"$1")+"</td><td width=\"10%\" rowspan=\""+effall.length+"\" style=\"text-align:center;\"><button type=\"submit\" onClick=\"_dialog_p3('"+target+"');\" >Pick<br>primers</button></td></tr>";
      }
      }
      string=string+"<tr style=\"height: 20px;\"><td class = cellTdBlank width=\"8%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
        <td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
        <td class = cellTdBlank width=\"41%\"></td><td width=\"10%\" class = cellTdBlank></td></tr>";
      }else{
	string=string+"<td width=\"60%\"></td><td width=\"10%\" style=\"text-align:center;\" ><button type=\"submit\" onClick=\"_dialog_p3('"+target+"');\" >Pick<br>primers</button></td></tr>";
      }
    }
    string=string+"</table>";
    ONINFOCELL.each=string;
    ONINFOCELL.str=ONINFOCELL.str+ONINFOCELL.each+"&nbsp;</span>";
  }
}

function _drawGffWindow(x,y,str){
  
  
}

var chDtlCellView="pos";
function _changeFmtPos(){
var o=CELLINFODRAW;
var view= Array();
var div = document.getElementById( "cellDigInfo" );
var chfmt = document.getElementById( "chfmt" );
if(chDtlCellView=="pos"){
  chDtlCellView="obj";
  var string="";
  var regit = Array();
  for (i=0; i<o.length; i++) {
     var targetend=+parseInt(o[i].pos)+parseInt(o[i].ref.length)-1;
     var target = THISACC+"---BLS---"+o[i].pos+"---BLS---"+targetend+"---BLS---"+o[i].variant;
     var effall = o[i].eff.split(",");
     string = "<table class = \"cellDigInfoTd\" width=\"100%\" style=\"margin-top: 10px; margin-bottom: 20px;\" border=\"1\" bordercolor=\"#DDDDDD\"> \
     <tr bgcolor=\"#CCCCCC\" style=\"height: 20px;\" ><td width=\"17%\" >ID</td><td width=\"12%\">Effect</td><td width=\"8%\">Position</td>\
     <td width=\"5%\">TYPE</td width=\"4%\"><td width=\"4%\">REF</td><td width=\"4%\">ALT</td><td width=\"4%\">GT</td><td width=\"5%\">QUAL</td><td width=\"31%\">snpEff</td><td class = cellTdBlank width=\"10%\"></td></tr>";
     var effEach = effall[0].split("---BLS---");
     //console.log(effEach[effEach.length-1]);
     for (var x=0; x<effall.length; x++) {
      var effEach = effall[x].split("|");
      var eff = effEach[0].split("(");
      var col="#7fffd4";
      var font="black";
      var addclass="class = cellTdBlank";
      switch(parseInt(effEach[effEach.length-1])) {
        case 0:
          col="#00BFFF";
          break;
        case 1:
          col="#FFFF00";
          break;
        case 2:
         col="#EE9A00";
          break;
        case 3:
          //col="#8B0000";
          col="red";
	  font="white";
          break;
        default:
          col="#00BFFF";
          break;
/*
        case 0:
          col="#00BFFF";
          break;
        case 1:
          col="#00BFFF";
          break;
        case 2:
          col="#0000FF";
          font="white";
          break;
        case 3:
         col="#FFFF00";
          break;
        case 4:
          col="#EE9A00";
          break;
        case 5:
          col="#8B0000";
          font="white";
          break;
        default:
          col="#7fffd4";
          break;
*/
      }
      if(effEach[8]==""){effEach[9]="NONE";}
      if(view[effEach[8]]){
        if(effEach[8] in regit){
          if(effEach[8]+":"+eff[0] in regit){
          }else{
            view[effEach[8]] = view[effEach[8]]+"<tr style=\"height: 20px;\" ><td "+addclass+" width=\"25%\"></td>\
              <td bgcolor=\""+col+"\" style=\"color:"+font+"\">"+eff[0]+"</td><td>"+o[i].pos+"</td><td>"+o[i].variant+"</td>\
              <td>"+o[i].ref+"</td><td>"+o[i].alt+"</td><td>"+o[i].gt+"</td><td>"+o[i].qual+"</td><td>"+effall[x].replace(/^\d|(.*)/,"($1")+"</td><td style=\"text-align:center;\"><button type=\"submit\" name=\"prm_p3_"+i+"\" onClick=\"_dialog_p3('"+target+"');\" >Pick<br>primers</button></td></tr>";
          }
        }else{
          view[effEach[8]] = "<tr style=\"height: 20px;\"><td "+addclass+" width=\"25%\">"+effEach[8]+"</td>\
            <td bgcolor=\""+col+"\"style=\"color:"+font+"\">"+eff[0]+"</td><td>"+o[i].pos+"</td><td>"+o[i].variant+"</td>\
            <td>"+o[i].ref+"</td><td>"+o[i].alt+"</td><td>"+o[i].gt+"</td><td>"+o[i].qual+"</td><td>"+effall[x].replace(/^\d|(.*)/,"($1")+"</td><td style=\"text-align:center;\"><button type=\"submit\" name=\"prm_p3_"+i+"\" onClick=\"_dialog_p3('"+target+"');\" >Pick<br>primers</button></td></tr>";
        }
      }else{
        view[effEach[8]] = "<tr style=\"height: 20px;\"><td width=\"17%\" bgcolor=\"#DDDDDD\" >"+effEach[8]+"</td>\
          <td width=\"12%\" bgcolor=\""+col+"\" style=\"color:"+font+"\">"+eff[0]+"</td><td width=\"8%\">"+o[i].pos+"</td>\
          <td width=\"4%\">"+o[i].variant+"</td><td width=\"4%\">"+o[i].ref+"</td><td width=\"4%\">"+o[i].alt+"</td>\
          <td width=\"4%\">"+o[i].gt+"</td><td width=\"4%\">"+o[i].qual+"</td><td width=\"42%\">"+effall[x].replace(/^\d|(.*)/,"($1")+"</td><td style=\"text-align:center;\"><button type=\"submit\" name=\"prm_p3_"+i+"\" onClick=\"_dialog_p3('"+target+"');\" >Pick<br>primers</button></td></tr>";
        regit[effEach[8]]="";
      }
     }
    
  }
  var res = _sortByKey(view,"");
  for (var prop in res){
    if(prop != "remove"){
      string=string+view[res[prop]]+"<tr style=\"height: 20px;\"><td class = cellTdBlank width=\"17%\"><td class = cellTdBlank width=\"12%\"><td class = cellTdBlank width=\"8%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
      <td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td><td class = cellTdBlank width=\"4%\"></td>\
      <td class = cellTdBlank width=\"42%\"></td><td class = cellTdBlank></td></tr>";
    }
  }
  string=string+"</table>";
  div.innerHTML = string;
  chfmt.innerHTML = "<div id=\"chfmt\" align=right><button type=\"submit\" onClick=\"_changeFmtPos();\" >Change to each variants</button></div>";
}else{
  chDtlCellView="pos";
  div.innerHTML = ONINFOCELL.each;
  chfmt.innerHTML = "<div id=\"chfmt\" align=right><button type=\"submit\" onClick=\"_changeFmtPos();\" >Change to each id</button></div>";
}
}

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

  var o=new Object(JSON.parse(localStorage.getItem('_Lists')));
y=i*Objects.BlockH+12;
  p=i*Objects.BlockH+(Objects.BlockH/2);
  p2=y;

var elemCont2 = document.getElementById("content2");
var bounds = elemCont2.getBoundingClientRect(); 
var boundsY = bounds.top;
var elemCont = document.getElementById("content");
var boundsB = elemCont.getBoundingClientRect(); 
var boundsBY = boundsB.top;
var hidreg =boundsBY+Objects.canvasHeight-boundsY-11;

if((Objects.canvasHeight - i*Objects.BlockH) <= 200+hidreg+Objects.BlockH ){
y=i*Objects.BlockH;
    p=i*Objects.BlockH+(Objects.BlockH/2);
    p2=y;
}
  ctx10.textAlign="left";
  ctx10.fillStyle="#ffffff";
  //ctx10.fillRect(5,5,270,180);
  ctx10.fillRect(5,5,360,230);
  ctx10.strokeStyle="#b0c4de";
  ctx10.lineWidth=5;
  ctx10.strokeRect(5,5,360,230);
  //ctx10.strokeRect(5,5,270,180);

  ctx10.fillStyle="#000000";
  ctx10.font="Bold 13px 'Century'";
 
  var names = [];
/*
  if( o[i].name.length > 14) {
	names = o[i].name.split(" ");
	ctx10.fillText("ID",30,25);
	ctx10.fillText("NAME",30,45);
  	ctx10.fillText("VARIETY",30,80);
  	ctx10.fillText("SUB VARIETY",30,100);
  	ctx10.fillText("ORIGIN",30,120);
  	ctx10.fillText("ORIGIN 2",30,140);
  	ctx10.fillText("TYPE",30,160);
  } else {
*/
	ctx10.fillText("ID",30,35);
  	ctx10.fillText("NAME",30,55);
  	ctx10.fillText("VARIETY",30,75);
  	ctx10.fillText("SUB VARIETY",30,95);
  	ctx10.fillText("ORIGIN",30,115);
  	ctx10.fillText("ORIGIN 2",30,135);
  	ctx10.fillText("TYPE",30,155);
  	ctx10.fillText("OTHER 1",30,175);
  	ctx10.fillText("OTHER 2",30,195);
  //}
  num = names.length;
  ctx10.font="12px 'Century'";
  //if (num == 0) {
  	ctx10.fillText(": "+o[i].id,135,35);
  	ctx10.fillText(": "+o[i].name,135,55);
  	ctx10.fillText(": "+o[i].variety,135,75);
  	ctx10.fillText(": "+o[i].grp,135,95);
  	ctx10.fillText(": "+o[i].origin,135,115);
  	ctx10.fillText(": "+o[i].origin_2,135,135);
  	ctx10.fillText(": "+o[i].type,135,155);
  	ctx10.fillText(": "+o[i].other_1,135,175);
  	ctx10.fillText(": "+o[i].other_2,135,195);
/*
  } else if(num > 0) {
	ctx10.fillText(": "+o[i].id,135,25);
        ctx10.fillText(": "+names[0],135,45);
        ctx10.fillText(names[1],140,60);
        ctx10.fillText(": "+o[i].variety,135,80);
        ctx10.fillText(": "+o[i].grp,135,100);
        ctx10.fillText(": "+o[i].origin,135,120);
        ctx10.fillText(": "+o[i].origin_2,135,140);
        ctx10.fillText(": "+o[i].type,135,160);
  }
*/

if(phenotypeFlg) {
	var phenotype = localStorage.getItem("_Phenotype");
  	if(localStorage.getItem("_Phenoexp") == null) {
        	_getPheno(phenotype);
  	}
	phenoexp = localStorage.getItem("_Phenoexp");
  	phenoexps = phenoexp.split("|");
 	var phenohash = new Array();
  	for(var j=0; j<phenoexps.length;j++) {
        	phenotmp = phenoexps[j].split(",");
        	phenohash[phenotmp[0]] = phenotmp[1];
  	}
  	ctx10.fillStyle="#000000";
  	ctx10.font="Bold 13px 'Century'";
	//if(num == 0) {
		ctx10.fillText(phenotype,30,215);
/*
	} else if (num > 0) {
		ctx10.fillText(phenotype,30,180);
	}
*/
	ctx10.font="12px 'Century'";
	//if(num == 0) {
		ctx10.fillText(": "+phenohash[o[i].name],135,215);
/*
	} else if (num > 0) {
		ctx10.fillText(": "+phenohash[o[i].id],135,180);
	}
*/
}
  // 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) {
/*
  var titleary = titlestr.split(",");
  var title = titleary[0];
  var subtitle = titleary[1];
*/
  ctx3.clearRect(0,0,cvs3.width,cvs3.height);
  ctx3.fillStyle="#dcdcdc";
  ctx3.fillRect(0,0,cvs3.width,cvs3.height); 
  var titleColor = localStorage.getItem('_ColorCode');
  var dest_subtitle = Objects["NameSub"];
  if(dest_subtitle == "subvariety"){dest_subtitle = "grp";}
  if(phenotypeFlg) {
  	phenoexp = localStorage.getItem("_Phenoexp");
  	phenoexps = phenoexp.split("|");
  	var phenohash = new Array();
  	for(i=0; i<phenoexps.length;i++) {
		phenotmp = phenoexps[i].split(",");
		phenohash[phenotmp[0]] = phenotmp[1];
	}
  }
  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.font="11px 'Arial'";
      if(titleColor == "on"){
        ctx3.fillStyle=_getTitleColor(Objects[dest_subtitle][i]);
      }else{
        ctx3.fillStyle=_setColor().title;
	
      }
    } else {
      ctx3.font="Bold 12px 'Courier'";
      //ctx3.font="Bold 12px 'Arial'";
      ctx3.fillStyle="#ff8c00";
    }
    var title_view = "";
    if (Objects.Name=="id"){
      title_view = Objects.id[i];
    }else{
      title_view = Objects.name[i];
    }
    var id_width = parseInt(Objects.titleWidth*0.7);
    var grp_width = Objects.titleWidth-id_width;
    //if(title_view.length>parseInt(id_width/7)-6){title_view = title_view.substring(0, parseInt(id_width/7)-6)+"~"; }
    if(title_view.length>parseInt(id_width/7)-5){title_view = title_view.substring(0, parseInt(id_width/7)-6)+"~"; }
    //}
    ctx3.fillText(title_view,Objects.titleIndent,Objects.BlockH*i+Objects.titleY);
    var sub_title_view = Objects[dest_subtitle][i];
    
    if(Objects[dest_subtitle][i].length>parseInt(grp_width/7)){sub_title_view = Objects[dest_subtitle][i].substring(0, parseInt(grp_width/7)-2)+"~"; }
    if(phenotypeFlg){
	    if ( Objects.NameSub == "variety" ) {
	      ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
	    } else if ( Objects.NameSub == "subvariety" ) {
	      ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
	    } else if ( Objects.NameSub == "origin" ) {
	      ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
	    } else if ( Objects.NameSub == "type" ) {
	      ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
            } else if ( Objects.NameSub == "other_1" ) {
              ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
            } else if ( Objects.NameSub == "other_2" ) {
              ctx3.fillText(sub_title_view, Objects.titleGrp - 27, Objects.BlockH*i+Objects.titleY);
            }
	    var phenonum = phenohash[Objects.name[i]];
	    if (phenonum) {
	    	ctx3.fillText(phenonum.substr(0,5), Objects.titleWidth - 32, Objects.BlockH*i+Objects.titleY);
	    }
	    /*
	    var plus_or_minus = "";
		if (Objects.PhenotypeExpressions[Objects.id[i]][Objects.Phenotype]){
			plus_or_minus = "+";
		}else{
			plus_or_minus = "-";
		}
		var phenonum = phenohash[Objects.id[i]];
		ctx3.fillText(phenonum, Objects.titleWidth - 15, Objects.BlockH*i+Objects.titleY);
		*/
    }else{
    	if ( Objects.NameSub == "variety" ) {
  	      ctx3.fillText(sub_title_view, Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
  	    } else if ( Objects.NameSub == "subvariety" ) {
  	      ctx3.fillText(sub_title_view, Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
  	    } else if ( Objects.NameSub == "origin" ) {
  	      ctx3.fillText(sub_title_view, Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
  	    } else if ( Objects.NameSub == "type" ) {
  	      ctx3.fillText(sub_title_view, Objects.titleGrp, Objects.BlockH*i+Objects.titleY);
  	    }
    }
  }
}

///////////////////////////// Drawing null block
function _drawNULLBlock() {
  	var cstm = localStorage.getItem('_CSTM');
  	var condArray = localStorage.getItem("_CrtCondition").split("|");
  	var cond = parseInt(condArray[0]);
	var o = {};
  	for (var y=0; y<Objects.db.length; y++){
		var exportFlg = localStorage.getItem("_exportFlg");
		if (exportFlg == 0) {
    			o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
		} else if (exportFlg == 1) {
			o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
		}
    		for (var x=0; x<o.length; x++) {
      			if(cstm == "off" || cstm == "disabled"){
        			if ( _isEmpty(o[x].dp) ) {
          				if (Objects._Null=="true"){
						if (exportFlg == 0) {
            						ctx4.fillStyle="PaleGoldenrod";
						} else if (exportFlg == 1) {
							ctx16.fillStyle="PaleGoldenrod";
						}
          				}else{
						if (exportFlg == 0) {
            						ctx4.fillStyle="white";
						} else if (exportFlg == 1) {
							ctx16.fillStyle="white";
						}
          				}
					if (exportFlg == 0) {
          					ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
					} else if (exportFlg == 1) {
						ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
					}
        			}else{
          				if(o[x].dp == "x"){
						if (exportFlg == 0) {
            						ctx4.fillStyle="#595454";
            						ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
						} else if (exportFlg == 1) {
							ctx16.fillStyle="#595454";
            						ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
						}
          				}
        			}
      			}else{
        			var splitted_rdp = o[x].rdp.split("%");
        			var valid = 0;
        			for(var a=0; a<condArray.length; a++){if(condArray[a]!=""){valid++;}}
        			var h = parseInt(Objects.BlockH/valid);
        			if(parseInt(Objects.BlockH%valid)!=0){h++;}
        			var drawn = 0;
        			for (var b=0; b<condArray.length; b++) {
          				if(condArray[b] != ""){
            					cond = parseInt(condArray[b]);
            					if ( _isEmpty(splitted_rdp[cond]) ) {
              						if (Objects._Null=="true"){
								if (exportFlg == 0) {
                							ctx4.fillStyle="PaleGoldenrod";
								} else if (exportFlg == 1) {
									ctx16.fillStyle="PaleGoldenrod";
								}
              						}else{
								if (exportFlg == 0) {
                							ctx4.fillStyle="white";
								} else if (exportFlg == 1) {
									ctx16.fillStyle="white";
								}
              						}
							if (exportFlg == 0) {
              							ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
							} else if (exportFlg == 1) {
								ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
							}
            					}else{
              						if(splitted_rdp[cond] == "x"){
								if (exportFlg == 0) {
                							ctx4.fillStyle="#595454";
                							ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
								} else if (exportFlg == 1) {
									ctx16.fillStyle="#595454";
                							ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
								}
              						}
            					}
            					drawn++;
          				}
        			}
      			}
      			// For changing reference
      			if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
				if (exportFlg == 0) {
        				ctx4.fillStyle="#595454";
        				ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
				} else if (exportFlg == 1) {
					ctx16.fillStyle="#595454";
        				ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
				}
      			}
    		}
  	}
}
////////////////////////////////////////
function _drawGTDel(){
  for (var y=0; y<Objects.db.length; y++) {
    var exportFlg = localStorage.getItem("_exportFlg");
    if (exportFlg == 0) {
      var o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
    } else if (exportFlg == 1) {
      var o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    }
    var width = parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom));
    for (var x=0; x<o.length; x++) {
      if ( ! _isEmpty(o[x].hd) ) {
        var str = o[x].hd;
        var strsp = str.split("%");
        var cnt=0;
        var numgt=0;
        var block=parseInt(x*Objects.BlockW);
        for(var i in strsp){cnt++;}
        for(var t=0; t < cnt-1; t++){
          var gt = strsp[numgt].split("-");
          width = parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom))*(gt[1].length) ;
          if (Objects.Eff=="off") {
	    if (exportFlg == 0) {
              ctx4.fillStyle="rgba(86,180,233,1.0)";
	    } else if (exportFlg == 1) {
              ctx16.fillStyle="rgba(86,180,233,1.0)";
	    }
          }else{
            switch(gt[3]) {
        	case 1:
          	  col="#00BFFF";
          	  break;
        	case 2:
        	  col="#00BFFF";
          	  font="white";
          	  break;
        	case 3:
         	  col="#FFFF00";
          	  break;
        	case 4:
         	  col="#EE9A00";
         	  break;
         	case 5:
          	  //col="#8B0000";
          	  col="red";
          	  font="white";
         	  break;
        	  default:
          	  col="#00BFFF";
          	  break;
            }
          }
          if(width < 2 ){width=2;}
	  if (exportFlg == 0) {
            if(gt[2]=="1/1"){
              ctx4.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH)+1, width, (Objects.BlockH)-1); 
              if(_cvtZoom(Objects.Zoom)==1){
                ctx4.fillStyle="#fff";
                var w=gt[1].length;
                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));
                }
              }
            }else{
              ctx4.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH)+1, width, parseInt(Objects.BlockH/2)-1); 
              if(_cvtZoom(Objects.Zoom)==1){
                ctx4.fillStyle="#fff";
                var w=gt[1].length;
                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/2));
                }
              }
            }
	  } else if (exportFlg == 1) {
            if(gt[2]=="1/1"){
              ctx16.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH)+1, width, (Objects.BlockH)-1);
              if(_cvtZoom(Objects.Zoom)==1){
                ctx16.fillStyle="#fff";
                var w=gt[1].length;
                for (i=0; i<w; i++) {
                  ctx16.textAlign="center";
                  ctx16.fillText("-", x*Objects.BlockW+(i*Objects.BlockW)+parseInt(Objects.BlockW/2), y*Objects.BlockH+parseInt(Objects.BlockH/1.5));
                }
              }
            }else{
              ctx16.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH)+1, width, parseInt(Objects.BlockH/2)-1);
              if(_cvtZoom(Objects.Zoom)==1){
                ctx16.fillStyle="#fff";
                var w=gt[1].length;
                for (i=0; i<w; i++) {
                  ctx16.textAlign="center";
                  ctx16.fillText("-", x*Objects.BlockW+(i*Objects.BlockW)+parseInt(Objects.BlockW/2), y*Objects.BlockH+parseInt(Objects.BlockH/2));
                }
              }
            }
	  }
          numgt++;
        }
      }
      // For changing reference
      if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
	if(_cvtZoom(Objects.Zoom)==1){
          ctx4.fillStyle="#595454";
          ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	} else if (exportFlg == 1) {
          ctx16.fillStyle="#595454";
          ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
	}
      }
    }
  }
}

////////////////////////////////////////
function _drawGTIns(){
  var snpCnt=new Array();
  for (var y=0; y<Objects.db.length; y++) {
    var exportFlg = localStorage.getItem("_exportFlg");
    if (exportFlg == 0) {
      var o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
    } else if (exportFlg == 1) {
      var o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    }
    var width = parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom));
    for (var x=0; x<o.length; x++) {
      if ( ! _isEmpty(o[x].hi) ) {
        var str = o[x].hi;
        var strsp = str.split("%");
        var cnt=0;
        var numgt=0;
        var calib=0
        var block=parseInt(x*Objects.BlockW);
        for(var i in strsp){cnt++;}
        for(var t=0; t < cnt-1; t++){
          var gt = strsp[numgt].split("-");
          width = parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom))*(gt[1].length) ;
          if (Objects.Eff=="off") {
	      if (exportFlg == 0) {
              	ctx4.fillStyle="rgba(213,94,0,1.0)";
	      } else if (exportFlg == 1) {
              	ctx16.fillStyle="rgba(213,94,0,1.0)";
	      }
          }else{
	    if (exportFlg == 0) {  
              switch(gt[3]) {
              	case "1":
                  ctx4.fillStyle="#00BFFF";
                  break;
              	case "2":
                  ctx4.fillStyle="#00BFFF";
                  break;
              	case "3":
                  ctx4.fillStyle="#FFFF00";
                  break;
              	case "4":
                  ctx4.fillStyle="#EE9A00";
                  break;
              	case "5":
                  //ctx4.fillStyle="#8B0000";
                  ctx4.fillStyle="red";
                  break;
              	default:
                  ctx4.fillStyle="#00BFFF";
                  break;
              }
	    } else if (exportFlg == 1) {
              switch(gt[3]) {
                case "1":
                  ctx16.fillStyle="#00BFFF";
                  break;
                case "2":
                  ctx16.fillStyle="#00BFFF";
                  break;
                case "3":
                  ctx16.fillStyle="#FFFF00";
                  break;
                case "4":
                  ctx16.fillStyle="#EE9A00";
                  break;
                case "5":
                  //ctx16.fillStyle="#8B0000";
                  ctx16.fillStyle="red";
                  break;
                default:
                  ctx16.fillStyle="#00BFFF";
                  break;
              }
	    }
          }
          if(parseInt(_cvtZoom(Objects.Zoom))/localStorage.getItem("_BlockW") < 2 ){calib=parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom)); }
	  if (exportFlg == 0) {
            if(gt[2]=="1/1"){
              ctx4.fillRect(parseInt(gt[0])+block+calib, (y*Objects.BlockH)+1, 2, (Objects.BlockH-parseInt((Objects.BlockH)*1/5))-1); 
              ctx4.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH))+1, 2+parseInt(Objects.BlockW*2/5), (parseInt(Objects.BlockH)/5)-1); 
              ctx4.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH)+parseInt((Objects.BlockH)*4/5)), 2+parseInt(Objects.BlockW*2/5), (parseInt(Objects.BlockH)/5)-1); 
              if(_cvtZoom(Objects.Zoom)==1){
                ctx4.fillStyle="#000";
                ctx4.fillText(gt[1],parseInt(gt[0])+block+calib+parseInt(Objects.BlockW*3/4), parseInt((y+4/5)*Objects.BlockH));
              }
            }else{
              ctx4.fillRect(parseInt(gt[0])+block+calib, (y*Objects.BlockH)+1, 2, (Objects.BlockH-parseInt((Objects.BlockH)*1/5*3))-1); 
              ctx4.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, parseInt(y*Objects.BlockH)+1, 2+parseInt(Objects.BlockW*2/5), parseInt(Objects.BlockH)/5-1); 
              ctx4.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH)+parseInt((Objects.BlockH)*2/5)), 2+parseInt(Objects.BlockW*2/5), parseInt(Objects.BlockH)/5)-1; 
              if(_cvtZoom(Objects.Zoom)==1){
                ctx4.fillStyle="#000";
                ctx4.fillText(gt[1],parseInt(gt[0])+block+calib+parseInt(Objects.BlockW*3/4), parseInt((y+4/5)*Objects.BlockH));
              }
            }
	  } else if (exportFlg == 1) {
            if(gt[2]=="1/1"){
              ctx16.fillRect(parseInt(gt[0])+block+calib, (y*Objects.BlockH)+1, 2, (Objects.BlockH-parseInt((Objects.BlockH)*1/5))-1);
              ctx16.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH))+1, 2+parseInt(Objects.BlockW*2/5), (parseInt(Objects.BlockH)/5)-1);
              ctx16.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH)+parseInt((Objects.BlockH)*4/5)), 2+parseInt(Objects.BlockW*2/5), (parseInt(Objects.BlockH)/5)-1);
              if(_cvtZoom(Objects.Zoom)==1){
                ctx16.fillStyle="#000";
                ctx16.fillText(gt[1],parseInt(gt[0])+block+calib+parseInt(Objects.BlockW*3/4), parseInt((y+4/5)*Objects.BlockH));
              }
            }else{
              ctx16.fillRect(parseInt(gt[0])+block+calib, (y*Objects.BlockH)+1, 2, (Objects.BlockH-parseInt((Objects.BlockH)*1/5*3))-1);
              ctx16.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, parseInt(y*Objects.BlockH)+1, 2+parseInt(Objects.BlockW*2/5), parseInt(Objects.BlockH)/5-1);
              ctx16.fillRect(parseInt(gt[0])+block+calib-parseInt(Objects.BlockW)/5, (parseInt(y*Objects.BlockH)+parseInt((Objects.BlockH)*2/5)), 2+parseInt(Objects.BlockW*2/5), parseInt(Objects.BlockH)/5)-1;
              if(_cvtZoom(Objects.Zoom)==1){
                ctx16.fillStyle="#000";
                ctx16.fillText(gt[1],parseInt(gt[0])+block+calib+parseInt(Objects.BlockW*3/4), parseInt((y+4/5)*Objects.BlockH));
              }
            }
	  }
          numgt++;
        }
      }
      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
      }
      // For changing reference
      if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
	if (exportFlg == 0) {
          ctx4.fillStyle="#595454";
          ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	} else if (exportFlg == 1) {
          ctx16.fillStyle="#595454";
          ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
	}
      }
    }
  }
  if (Objects.Mode != "dp+a" && Objects.Mode != "si") {
    _drawDensity(snpCnt,"INDEL");
  }
}

////////////////////////////////////////
function _drawGTSnp(){
  var snpCnt=new Array();
  for (var y=0; y<Objects.db.length; y++) {
    var exportFlg = localStorage.getItem("_exportFlg");
    if (exportFlg == 0) {
    	var o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
    } else if (exportFlg == 1) {
    	var o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    }
    var width = parseInt(localStorage.getItem("_BlockW")/_cvtZoom(Objects.Zoom));
    for (var x=0; x<o.length; x++) {
      if ( ! _isEmpty(o[x].hs) ) {
        var str = o[x].hs;
        var strsp = str.split("%");
        var cnt=0;
        var numgt=0;
        var block=parseInt(x*Objects.BlockW);
        for(var i in strsp){cnt++;}
        for(var t=0; t < cnt-1; t++){
          var gt = strsp[numgt].split("-");
          if (Objects.Eff=="off") {
	      if (exportFlg == 0) {
            	switch(gt[1]) {
              	  case "A":
                    ctx4.fillStyle="rgba(255,193,37,1.0)";
                    break;
              	  case "T":
                    ctx4.fillStyle="rgba(218,107,169,1.0)";
                    break;
              	  case "G":
                    ctx4.fillStyle="rgba(60,179,113,1.0)";
                    break;
              	  case "C":
                    ctx4.fillStyle="rgba(0,100,255,1.0)";
                    break;
            	}
	      } else if (exportFlg == 1) {
                switch(gt[1]) {
                  case "A":
                    ctx16.fillStyle="rgba(255,193,37,1.0)";
                    break;
                  case "T":
                    ctx16.fillStyle="rgba(218,107,169,1.0)";
                    break;
                  case "G":
                    ctx16.fillStyle="rgba(60,179,113,1.0)";
                    break;
                  case "C":
                    ctx16.fillStyle="rgba(0,100,255,1.0)";
                    break;
                }
	      }
          }else{
	    if (exportFlg == 0) {  
              switch(gt[3]) {
              	case "1":
                  ctx4.fillStyle="#00BFFF";
                  break;
              	case "2":
                  ctx4.fillStyle="#00BFFF";
                  break;
              	case "3":
                  ctx4.fillStyle="#FFFF00";
                  break;
              	case "4":
                  ctx4.fillStyle="#EE9A00";
                  break;
              	case "5":
                  //ctx4.fillStyle="#8B0000";
                  ctx4.fillStyle="red";
                  break;
              	default:
                  ctx4.fillStyle="#00BFFF";
                  break;
              }
	    } else if (exportFlg == 1) {
              switch(gt[3]) {
                case "1":
                  ctx16.fillStyle="#00BFFF";
                  break;
                case "2":
                  ctx16.fillStyle="#00BFFF";
                  break;
                case "3":
                  ctx16.fillStyle="#FFFF00";
                  break;
                case "4":
                  ctx16.fillStyle="#EE9A00";
                  break;
                case "5":
                  //ctx4.fillStyle="#8B0000";
                  ctx16.fillStyle="red";
                  break;
                default:
                  ctx16.fillStyle="#00BFFF";
                  break;
              }
	    }
          }

          if(width < 2 ){width=2;}
	  if (exportFlg == 0) {
            if(gt[2]=="1/1"){
              ctx4.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH+1), width, Objects.BlockH-1); 
            }else{
              ctx4.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH+1), width, parseInt(Objects.BlockH/2)-1); 
            }
	  } else if (exportFlg == 1) {
            if(gt[2]=="1/1"){
              ctx16.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH+1), width, Objects.BlockH-1);
            }else{
              ctx16.fillRect(parseInt(gt[0])+block, (y*Objects.BlockH+1), width, parseInt(Objects.BlockH/2)-1);
            }
	  }
          numgt++;
        }
      }
      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
      }
      // For changing reference
      if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
	if (exportFlg == 0) {
          ctx4.fillStyle="#595454";
          ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	} else if (exportFlg == 1) {
          ctx16.fillStyle="#595454";
          ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
	}
      }
    }
  }
  _drawDensity(snpCnt,"SNP");
}

///////////////////////////// Drawing Depth block
function _drawDPBlock() {
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var condArray = localStorage.getItem("_CrtCondition").split("|");
  var cond = parseInt(condArray[0]);
  for (var y=0; y<Objects.db.length; y++) {
    var exportFlg = localStorage.getItem("_exportFlg");
    if (exportFlg == 0) {
    	var o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
    } else if (exportFlg == 1) {
    	var o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    }
    var en=new Object(JSON.parse(localStorage.getItem("_Env")));
    var dpmx =_getMaxGraDP();
    var cstm=localStorage.getItem('_CSTM');
    var offsetDP=en.depth_min-1;
    var offsetCSTM=en.cstm_min-1;
    for (var x=0; x<o.length; x++) {
      if(cstm=="on"){
        var splitted_rdp = o[x].rdp.split("%");
        var valid = 0;
        for(var a=0; a<condArray.length; a++){if(condArray[a]!=""){valid++;}}
        var h = parseInt(Objects.BlockH/valid);
        if(parseInt(Objects.BlockH%valid)!=0){h++;}
        var drawn = 0;
        for (var b=0; b<condArray.length; b++) {
          cond = parseInt(condArray[b]);
          if(condArray[b] != ""){
            if(b > (valid-1)){
              if ( ! _isEmpty(splitted_rdp[cond]) ) {
                if(splitted_rdp[cond] == "n"){
			if (exportFlg == 0) {
                  		ctx4.fillStyle="#f2f2f2";
                  		ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h); 
			} else if (exportFlg == 1) {
                                ctx16.fillStyle="#f2f2f2";
                                ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
			}
                }else if(splitted_rdp[cond] == "x"){
			if (exportFlg == 0) {
                  		ctx4.fillStyle="#595454";
                  		ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h); 
			} else if (exportFlg == 1) {
				ctx16.fillStyle="#595454";
                                ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
			}
                }else{
                  var dps = parseInt(splitted_rdp[cond])-(offsetCSTM);
                  if(dps<1){dps = 0;}
                  if(dps > en.cstm_max-offsetCSTM){
			if (exportFlg == 0) {
                    		ctx4.fillStyle=grad_CSTM_array[b](1);
			} else if (exportFlg == 1) {
                    		ctx16.fillStyle=grad_CSTM_array[b](1);
			}
                  }else if(dps == 0){
			if (exportFlg == 0) {
                    		ctx4.fillStyle=en.cstm_min_col;
			} else if (exportFlg == 1) {
                    		ctx16.fillStyle=en.cstm_min_col;
			}
                  }else{
			if (exportFlg == 0) {
                    		ctx4.fillStyle=grad_CSTM_array[b](dps/(en.cstm_max-offsetCSTM));
			} else if (exportFlg == 1) {
                    		ctx16.fillStyle=grad_CSTM_array[b](dps/(en.cstm_max-offsetCSTM));
			}
                  }
		  if (exportFlg == 0) {
                  	ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
		  } else if (exportFlg == 1) { 
                  	ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
		  }
                }
              }
            }else{
              if ( ! _isEmpty(splitted_rdp[cond]) ) {
                if(splitted_rdp[cond] == "n"){
			if (exportFlg == 0) {
                  		ctx4.fillStyle="#f2f2f2";
                  		ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h); 
			} else if (exportFlg == 1) {
				ctx16.fillStyle="#f2f2f2";
                                ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
                        }
                }else if(splitted_rdp[cond] == "x"){
                        if (exportFlg == 0) {
                                ctx4.fillStyle="#595454";
                                ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
                        } else if (exportFlg == 1) {
                                ctx16.fillStyle="#595454";
                                ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
                        }
                }else{
                  var dps = parseInt(splitted_rdp[cond])-(offsetCSTM);
                  if(dps<1){dps = 0;}
                  if(dps > en.cstm_max-offsetCSTM){
                        if (exportFlg == 0) {
                                ctx4.fillStyle=grad_CSTM_array[b](1);
                        } else if (exportFlg == 1) {
                                ctx16.fillStyle=grad_CSTM_array[b](1);
                        }
                  }else if(dps == 0){
                        if (exportFlg == 0) {
                                ctx4.fillStyle=en.cstm_min_col;
                        } else if (exportFlg == 1) {
                                ctx16.fillStyle=en.cstm_min_col;
                        }
                  }else{
                        if (exportFlg == 0) {
                                ctx4.fillStyle=grad_CSTM_array[b](dps/(en.cstm_max-offsetCSTM));
                        } else if (exportFlg == 1) {
                                ctx16.fillStyle=grad_CSTM_array[b](dps/(en.cstm_max-offsetCSTM));
                        }
                  }
                  if (exportFlg == 0) {
                        ctx4.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
                  } else if (exportFlg == 1) {
                        ctx16.fillRect(x*Objects.BlockW, (y*Objects.BlockH)+(drawn*h), Objects.BlockW, h);
                  }
                }
              }
            }
            drawn++;
          }
        }
      }else{
        if ( ! _isEmpty(o[x].dp) ) {
          if(o[x].dp == "n"){
		if (exportFlg == 0) {
            		ctx4.fillStyle="#f2f2f2";
            		ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
		} else if (exportFlg == 1) {
			ctx16.fillStyle="#f2f2f2";
                        ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
		}
          }else if(o[x].dp == "x"){
		if (exportFlg == 0) {
            		ctx4.fillStyle="#595454";
            		ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
		} else if (exportFlg == 1) {
			ctx16.fillStyle="#595454";
                        ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH);
                }
          }else{
            var dps = parseInt(o[x].dp)-(offsetDP);
            if(dps<1){dps = 0;}
            if(dps > dpmx-offsetDP){
		if (exportFlg == 0) {
              		ctx4.fillStyle=grad_DP(1);  
		} else if (exportFlg == 1) {
              		ctx16.fillStyle=grad_DP(1);  
		}
            }else if(dps == 0){
		if (exportFlg == 0) {
              		ctx4.fillStyle=en.depth_min_col;
		} else if (exportFlg == 1) {
              		ctx16.fillStyle=en.depth_min_col;
		}
            }else{
		if (exportFlg == 0) {
              		ctx4.fillStyle=grad_DP(dps/(dpmx-offsetDP));
		} else if (exportFlg == 1) {
              		ctx16.fillStyle=grad_DP(dps/(dpmx-offsetDP));
		}
            }
	    if (exportFlg == 0) {
            	ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	    } else if (exportFlg == 1) {
            	ctx16.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	    }
          }
        } 
      }
      // For changing reference
      if ( Objects.db[y] == localStorage.getItem('_Ref') ) {
	if (exportFlg == 0) {
        	ctx4.fillStyle="#595454";
        	ctx4.fillRect(x*Objects.BlockW, y*Objects.BlockH, Objects.BlockW, Objects.BlockH); 
	} else if (exportFlg == 1) {
		ctx16.fillStyle="#595454";
                ctx16.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(_getCompressedData(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.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 en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var snpCnt=new Array();
  var snpMax=0;
  var offset=en.snp_min-1;
  var o = {};
  for (var y=0; y<Objects.db.length; y++) {
	var exportFlg = localStorage.getItem("_exportFlg");
    if (exportFlg == 0) {
    	o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
    } else if (exportFlg == 1) {
    	o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    }
    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
        var snps = parseInt(t[0])-offset;
        if(snps<1){continue;}
        if (Objects.Eff=="off") {
          if(parseInt(t[0])>_getMaxGraSNP()-offset){
		if (exportFlg == 0) {
              		ctx4.fillStyle=grad_S(1);
		} else if (exportFlg == 1) {
	      		ctx16.fillStyle=grad_S(1);
		}
          } else {
		if (exportFlg == 0) {
              		ctx4.fillStyle=grad_S((snps)/(_getMaxGraSNP()-offset));
		} else if (exportFlg == 1) {
              		ctx16.fillStyle=grad_S((snps)/(_getMaxGraSNP()-offset));
		}
          }
        } else {
          switch(t[1]) {
            case "1":
		if (exportFlg == 0) {
                	ctx4.fillStyle="#00BFFF";
		} else if (exportFlg == 1) {
                	ctx16.fillStyle="#00BFFF";
		}
              break;
            case "2":
		if (exportFlg == 0) {
                	ctx4.fillStyle="#00BFFF";
		} else if (exportFlg == 1) {
                	ctx16.fillStyle="#00BFFF";
		}
              break;
            case "3":
		if (exportFlg == 0) {
                	ctx4.fillStyle="#FFFF00";
		} else if (exportFlg == 1) {
			ctx16.fillStyle="#FFFF00";
		}
              break;
            case "4":
		if (exportFlg == 0) {
                	ctx4.fillStyle="#EE9A00";
		} else if (exportFlg == 1) {
			ctx16.fillStyle="#EE9A00";
		}
              break;
            case "5":
		if (exportFlg == 0) {
                	//ctx4.fillStyle="#8B0000";
                	ctx4.fillStyle="red";
		} else if (exportFlg == 1) {
			ctx16.fillStyle="red";
		}
              break;
            default:
		if (exportFlg == 0) {
                	ctx4.fillStyle="#00BFFF";
		} else if (exportFlg == 1) {
                	ctx16.fillStyle="#00BFFF";
		}
              break;
          }
        }
        if ( mode == 0 ) {
		if (exportFlg == 0) {
           		ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/1.25);
		} else if (exportFlg == 1) {
            		ctx16.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 ) {
		if (exportFlg == 0) {
          		ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
		} else if (exportFlg == 1) {
          		ctx16.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
		}
        } else if ( mode == 2 ) {
	 	if (exportFlg == 0) {
          		ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/4);
		} else if (exportFlg == 1) {
          		ctx16.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/4);
		}
        } else if (mode ==4 ){
		if (exportFlg == 0) {
          		ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/2.5);
		} else if (exportFlg == 1) {
          		ctx16.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 ){
		if (exportFlg == 0) {
          		ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/6), (y*Objects.BlockH)+(Objects.BlockH/6), Objects.BlockW/1.5, Objects.BlockH/1.5);
		} else if (exportFlg == 1) {
          		ctx16.fillRect(x*Objects.BlockW+(Objects.BlockW/6), (y*Objects.BlockH)+(Objects.BlockH/6), Objects.BlockW/1.5, Objects.BlockH/1.5);
		}
        }
        if ( mode == 3 ) {
		if (exportFlg == 0) {
          		ctx4.fillRect(x*Objects.BlockW+1, y*Objects.BlockH+1, Objects.BlockW-2, Objects.BlockH-2);
		} else if (exportFlg == 1) {
          		ctx16.fillRect(x*Objects.BlockW+1, y*Objects.BlockH+1, Objects.BlockW-2, Objects.BlockH-2);
		}
	if (exportFlg == 0) {
          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));
          if ( localStorage.getItem("_DirRef") == "+" ) {
            ctx4.fillText(t[3], x*Objects.BlockW+(Objects.BlockW/2), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/5));
          }else{
            ctx4.fillText(_reverseNucleotide(t[3]), x*Objects.BlockW+(Objects.BlockW/2), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/5));
          }
        } else if (exportFlg == 1) {
	  if ( t[4] == "1/1"  || t[4] == "1|1") {
            ctx16.strokeStyle="#000000";
            ctx16.lineWidth=0.5;
            ctx16.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
          }
          ctx16.font="9px 'Courier'";
          if ( t[1] == "2" && Objects.Eff=="on") {
            ctx16.fillStyle="#fff";
          } else {
            ctx16.fillStyle="#000";
          }
          ctx16.textAlign="center";
          //ctx4.fillText(t[3], x*Objects.BlockW+(Objects.BlockW/2), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/5));
          if ( localStorage.getItem("_DirRef") == "+" ) {
            ctx16.fillText(t[3], x*Objects.BlockW+(Objects.BlockW/2), Objects.BlockH*y+Objects.BlockH-(Objects.BlockH/5));
          }else{
            ctx16.fillText(_reverseNucleotide(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;
  var exportFlg = localStorage.getItem("_exportFlg");
  if (exportFlg == 0) {
  	ctx6.fillStyle="#ffffff";
  	ctx6.fillRect(0,0,cvs6.width,cvs6.height);
  } else if (exportFlg == 1) {
	ctx18.fillStyle="#ffffff";
        ctx18.fillRect(0,0,cvs6.width,cvs6.height);
  }
/*
  var thread=4;
  var snpCnt=new Array();
  for (var y=0; y<Objects.db.length; y++) {
    	var o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
    	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
   		}
	}
  }
*/
  // 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 (exportFlg == 0) {
        	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);
	} else if (exportFlg == 1) {
		if ( str == "SNP" ) ctx18.fillStyle="blue";
                  else ctx18.fillStyle="brown";
		ctx18.fillRect(k*Objects.BlockW+0.5, 18-(i*2), Objects.BlockW-1, 1.2);
	}
        //ctx6.fillRect(k*Objects.BlockW+0.5, 18-(i*2), Objects.BlockW-1, 1.2);
      }
    }
  }
 

  // Mark "SNP Rate"
  if (exportFlg == 0) {
  	ctx5.fillStyle=_setColor().snptitle;
  	ctx5.textAlign="left";
  	ctx5.font="12px 'Arial'";
  	ctx5.fillText(str+" density", 5, cvs5.height-1);
  	//ctx5.font="10px 'Courier'";
  	ctx5.font="10px 'Arial'";
  	ctx5.textAlign="right";
  	if(localStorage.getItem("_Color") == "2") {
  	  ctx5.fillStyle = _setColor().tracktitle;
  	} else {
  	  //ctx5.fillStyle = "#dcdcdc";
  	  ctx5.fillStyle = "#000";
  	}
  	ctx5.fillText(String((snpMax/(Objects.db.length*_cvtZoom(Objects.Zoom))).toFixed(4)),cvs5.width-2, 8);
  } else if (exportFlg == 1) {
        ctx17.fillStyle=_setColor().snptitle;
        ctx17.textAlign="left";
        ctx17.font="12px 'Arial'";
        ctx17.fillText(str+" density", 5, cvs5.height-1);
        //ctx5.font="10px 'Courier'";
        ctx17.font="10px 'Arial'";
        ctx17.textAlign="right";
        if(localStorage.getItem("_Color") == "2") {
          ctx17.fillStyle = _setColor().tracktitle;
        } else {
          //ctx5.fillStyle = "#dcdcdc";
          ctx17.fillStyle = "#000";
        }
        ctx17.fillText(String((snpMax/(Objects.db.length*_cvtZoom(Objects.Zoom))).toFixed(4)),cvs5.width-2, 8);
  }
}

///////////////////////////// Drawing INDEL block
function _drawINDELBlock(mode) {
  	var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  	var snpCnt=new Array();
  	var snpMax=0;
  	var offset=en.indel_min-1;
	var o = {};
  	for (var y=0; y<Objects.db.length; y++) {
		var exportFlg = localStorage.getItem("_exportFlg");
		if (exportFlg == 0) {
    			o=new Object(JSON.parse(_getCompressedData(Objects.db[y])));
		} else if (exportFlg == 1) {
			o=new Object(JSON.parse(_getCompressedData(Objects.db[y]+"dst")));
		}
    		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
      			}
      			var indels = ti-offset;
      			if((!_isEmpty(o[x].i) || !_isEmpty(o[x].d)) && indels > 0 ){
        			if (Objects.Eff=="off") {
          				if(indels>_getMaxGraINDEL()-offset){
						if (exportFlg == 0) {
            						ctx4.fillStyle=grad_INDEL(1);
						} else if (exportFlg == 1) {
							ctx16.fillStyle=grad_INDEL(1);
						}
          				} else {
						if (exportFlg == 0) {
            						ctx4.fillStyle=grad_INDEL(indels/(_getMaxGraINDEL()-offset));
						} else if (exportFlg == 1) {
							ctx16.fillStyle=grad_INDEL(indels/(_getMaxGraINDEL()-offset));
						}
          				}
        			} else {
          				switch(te) {
            					case 1:
							if (exportFlg == 0) {
              							ctx4.fillStyle="#00BFFF";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="#00BFFF";
							}
              						break;
            					case 2:
							if (exportFlg == 0) {
              							ctx4.fillStyle="#00BFFF";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="#00BFFF";
							}
              						break;
            					case 3:
							if (exportFlg == 0) {
              							ctx4.fillStyle="#FFFF00";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="#FFFF00";
							}
              						break;
            					case 4:
							if (exportFlg == 0) {
              							ctx4.fillStyle="#EE9A00";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="#EE9A00";
							}
              						break;
            					case 5:
							if (exportFlg == 0) {
              							//ctx4.fillStyle="#8B0000";
              							ctx4.fillStyle="red";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="red";
							}
             						break;
            					default:
							if (exportFlg == 0) {
              							ctx4.fillStyle="#00BFFF";
							} else if (exportFlg == 1) {
								ctx16.fillStyle="#00BFFF";
							}
              						break;
          				}
        			}
        			if ( mode == 0 ) {
					if (exportFlg == 0) {
          					ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/10), (y*Objects.BlockH)+(Objects.BlockH/10), Objects.BlockW/1.25, Objects.BlockH/1.25);
					} else if (exportFlg == 1) {
						ctx16.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 ) {
					if (exportFlg == 0) {
          					ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
					} else if (exportFlg == 1) {
						ctx16.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4), Objects.BlockW/2, Objects.BlockH/2);
					}
        			} else if ( mode == 2 ) {
					if (exportFlg == 0) {
          					ctx4.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4)*2, Objects.BlockW/2, Objects.BlockH/4);
					} else if (exportFlg == 1) {
						ctx16.fillRect(x*Objects.BlockW+(Objects.BlockW/4), (y*Objects.BlockH)+(Objects.BlockH/4)*2, Objects.BlockW/2, Objects.BlockH/4);
					}
        			} else if ( mode == 4 ) {
					if (exportFlg == 0) {
          					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 (exportFlg == 1) {
						ctx16.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) ) {
						if (exportFlg == 0) {
            						ctx4.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
						} else if (exportFlg == 1) {
							ctx16.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
						}
            					if ( t[4] == "1/1" ) {
							if (exportFlg == 0) {
              							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);
							} else if (exportFlg == 1) {
								ctx16.strokeStyle="#000000";
              							ctx16.lineWidth=0.5;
              							ctx16.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, Objects.BlockW-1, Objects.BlockH-1);
							}
            					}
						if (exportFlg == 0) {
            						ctx4.fillStyle="#000";
            						ctx4.textAlign="left";
						} else if (exportFlg == 1) {
							ctx16.fillStyle="#000";
            						ctx16.textAlign="left";
						}
            					if ( localStorage.getItem("_DirRef") == "+" ) {
							if (exportFlg == 0) {
              							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));
							} else if (exportFlg == 1) {
								ctx16.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));
							}
            					}else{
							if (exportFlg == 0) {
              							ctx4.fillText(_reverseNucleotide(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));
							} else if (exportFlg == 1) {
								ctx16.fillText(_reverseNucleotide(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;
						if (exportFlg == 0) {
            						ctx4.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, w*Objects.BlockW-1, Objects.BlockH-1);
						} else if (exportFlg == 1) {
							ctx16.fillRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, w*Objects.BlockW-1, Objects.BlockH-1);
						}
            					if ( t[4] == "1/1" ) {
							if (exportFlg == 0) {
              							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);
							} else if (exportFlg == 1) {
								ctx16.strokeStyle="#000000";
              							ctx16.lineWidth=0.5;
              							ctx16.strokeRect(x*Objects.BlockW+0.5, y*Objects.BlockH+0.5, w*Objects.BlockW-1, Objects.BlockH-1);
							}
            					}
						if (exportFlg == 0) {
            						ctx4.fillStyle="#fff";
						} else if (exportFlg == 1) {
							ctx16.fillStyle="#fff";
						}
            					for (i=0; i<w; i++) {
							if (exportFlg == 0) {
              							ctx4.textAlign="center";
              							ctx4.fillText("-", x*Objects.BlockW+(i*Objects.BlockW)+parseInt(Objects.BlockW/2), y*Objects.BlockH+parseInt(Objects.BlockH/1.5));
							} else if (exportFlg == 1) {
								ctx16.textAlign="center";
              							ctx16.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);
  
  if(phenotypeFlg){
	  ctx12.clearRect(0, 0, Objects.canvasWidth, Objects.canvasHeight);
	  ctx12.putImageData(framePlot1, 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);
/*
    if(phenotypeFlg){
	    ctx12.strokeStyle=_setColor().centeringcell;
	    ctx12.lineWidth=2;
	    ctx12.strokeRect(0,0,cvs12.width,cvs12.height);
	    ctx12.lineWidth=1;
	    ctx12.beginPath();
	    ctx12.moveTo(cvs12.width/2, 0);
	    ctx12.lineTo(cvs12.width/2, cvs12.height);
	    ctx12.stroke();
	    ctx12.strokeStyle="rgba(255,0,0,0.5)";
	    ctx12.lineWidth=1;
	    ctx12.beginPath();
	    ctx12.moveTo(XY.x2, XY.y2);
	    ctx12.lineTo(cvs12.width/2, XY.y2);
	    ctx12.stroke();
	    ctx12.fillStyle="black";
	    ctx12.fillText(parseInt((XY.x2-cvs12.width/2)/Objects.BlockW*_cvtZoom(Objects.Zoom))+" from center", XY.x2, XY.y2-5);
    }
*/
  } else if (flag == "onTrack") {
    ctx1.strokeStyle=_setColor().centeringtrack;
    ctx1.lineWidth=1;
    ctx1.beginPath();
    ctx1.moveTo(cvs4.width/2, 0);
    ctx1.lineTo(cvs4.width/2, cvs4.height);
    ctx1.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);    
  } 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);
*/
    if(phenotypeFlg){
	    ctx12.strokeStyle=_setColor().centeringcell;
	    ctx12.lineWidth=2;
/*
	    ctx12.strokeRect(0,0,cvs12.width,cvs12.height);
	    ctx12.strokeStyle=_setColor().centeringcell;
	    ctx12.lineWidth=1;
*/
	    ctx12.beginPath();
	    ctx12.moveTo(cvs4.width/2, 0);
	    ctx12.lineTo(cvs4.width/2, cvs4.height);
	    ctx12.stroke();

            ctx12.strokeStyle="rgba(255,0,0,0.5)";
            ctx12.lineWidth=1;
            ctx12.beginPath();
            ctx12.moveTo(XY.x2, XY.y2);
            ctx12.lineTo(cvs12.width/2, XY.y2);
            ctx12.stroke();
            ctx12.fillStyle="black";
            ctx12.fillText(parseInt((XY.x2-cvs12.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();
  }
  // Capture tracks without rules
  _drawRules();
  if (phenotypeFlg) {
	_drawRulesforPlot();
  }
}

///////////////////////////// Drawing Indicator
function _drawIndicator() {
/*
  if(phenotypeFlg){
	  $('#phenotype_button_div').show();
  }
*/
  var Ix=cvs7.width-145;
  var Iy=5;
  var Ia=0;
  var element = document.getElementById("ind"); 

  if ( Objects.Eff == "off" ) {
    if (Objects.Snpblock == "off"){
      if (Objects.Onebase == "off"){
        switch (Objects.Mode) {
          case "dp":
/*
        	if(phenotypeFlg){
        		element.style.clip = 'rect(22px,150px,165px,0px)';
        	}else{
        		element.style.clip = 'rect(32px,150px,165px,0px)';
        	}
*/ 
       	    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;
             if(phenotypeFlg){
            	 element.style.clip = 'rect(6px,150px,165px,0px)';
             }else{
            	 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;
            if(phenotypeFlg){
            	element.style.clip = 'rect(6px,150px,165px,0px)';
            }else{
            	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":
        	if(phenotypeFlg){
        		element.style.clip = 'rect(-10px,150px,165px,0px)';
        	}else{
        		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;
            if(phenotypeFlg){
            	element.style.clip = 'rect(0px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(32px,150px,165px,0px)';
            }
            _drawIndicator_SNP(Ix,Iy);
            _drawIndicator_Filter(Ia);
            break;
          case "i":
            Ia=36;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(22px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(32px,150px,165px,0px)';
            }
            _drawIndicator_INDEL(Ix,Iy);
            _drawIndicator_Filter(Ia);
            break;
          case "si":
            Ia=18;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(6px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(16px,150px,165px,0px)';
            }
            _drawIndicator_SNP(Ix,Iy);
            _drawIndicator_INDEL(Ix,Iy=Iy+18);
            _drawIndicator_Filter(Ia);
            break;
        }
      }else{
        switch (Objects.Mode) {
          case "dp":
        	if(phenotypeFlg){
        		element.style.clip = 'rect(22px,150px,165px,0px)';
        	}else{
        		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;
             if(phenotypeFlg){
            	 element.style.clip = 'rect(6px,150px,165px,0px)';
             }else{
            	 element.style.clip = 'rect(16px,150px,165px,0px)';
             }
            _drawIndicator_DP(Ix,Iy);
            _drawIndicator_Nuc(Ix,Iy=Iy+18);
            _drawIndicator_Filter(Ia);
            break;
          case "dp+i":
            Ia=18;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(6px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(16px,150px,165px,0px)';
            }
            _drawIndicator_DP(Ix,Iy);
            _drawIndicator_IndelOnebase(Ix,Iy=Iy+18);
            _drawIndicator_Filter(Ia);
            break;
          case "dp+a":
        	  if(phenotypeFlg){
        		  element.style.clip = 'rect(-10px,150px,165px,0px)';
        	  }else{
        		  element.style.clip = 'rect(0px,150px,165px,0px)';
        	  }
            _drawIndicator_DP(Ix,Iy);
            _drawIndicator_Nuc(Ix,Iy=Iy+18);
            _drawIndicator_IndelOnebase(Ix,Iy=Iy+18);
            _drawIndicator_Filter(Ia);
            break;
          case "s":
            Ia=36;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(22px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(32px,150px,165px,0px)';
            }
            _drawIndicator_Nuc(Ix,Iy);
            _drawIndicator_Filter(Ia);
            break;
          case "i":
            Ia=36;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(22px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(32px,150px,165px,0px)';
            }
            _drawIndicator_IndelOnebase(Ix,Iy);
            _drawIndicator_Filter(Ia);
            break;
          case "si":
            Ia=18;
            Iy=Iy+Ia;
            if(phenotypeFlg){
            	element.style.clip = 'rect(6px,150px,165px,0px)';
            }else{
            	element.style.clip = 'rect(16px,150px,165px,0px)';
            }
            _drawIndicator_Nuc(Ix,Iy);
            _drawIndicator_IndelOnebase(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"){
    	  if(phenotypeFlg){
    		  element.style.clip = 'rect(-10px,150px,165px,0px)';
    	  }else{
    		  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;
        if(phenotypeFlg){
        	element.style.clip = 'rect(6px,150px,165px,0px)';
        }else{
        	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":
    	  if(phenotypeFlg){
    		  element.style.clip = 'rect(22px,150px,165px,0px)';
    	  }else{
    		  element.style.clip = 'rect(32px,150px,165px,0px)';
    	  }
        Ia=36;
        Iy=Iy+Ia;
        _drawIndicator_DP(Ix,Iy);
        break;
      case "dp+s":
        //Ia=18;
        Ia=0;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	//element.style.clip = 'rect(6px,150px,165px,0px)';
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(16px,150px,165px,0px)';
        }
        _drawIndicator_DP(Ix,Iy);
        _drawIndicator_EFF(Ix,Iy=Iy+18,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
      case "dp+i":
        //Ia=18;
        Ia=0;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	//element.style.clip = 'rect(6px,150px,165px,0px)';
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(16px,150px,165px,0px)';
        }
        _drawIndicator_DP(Ix,Iy);
        _drawIndicator_EFF(Ix,Iy=Iy+18,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
      case "dp+a":
        //Ia=18;
        Ia=0;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(16px,150px,165px,0px)';
        }
        _drawIndicator_DP(Ix,Iy);
        _drawIndicator_EFF(Ix,Iy=Iy+18,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
      case "s":
        Ia=18;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(32px,150px,165px,0px)';
        }
        _drawIndicator_EFF(Ix,Iy=Iy,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
      case "i":
        Ia=18;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(32px,150px,165px,0px)';
        }
        _drawIndicator_EFF(Ix,Iy=Iy,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
      case "si":
        Ia=18;
        Iy=Iy+Ia;
        if(phenotypeFlg){
        	element.style.clip = 'rect(0px,150px,165px,0px)';
        }else{
        	element.style.clip = 'rect(32px,150px,165px,0px)';
        }
        _drawIndicator_EFF(Ix,Iy=Iy,1);
        _drawIndicator_EFF(Ix,Iy=Iy+18,2);
        _drawIndicator_Filter(Ia);
        break;
    }
  }
  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-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=4;
    ctx7.beginPath();
    ctx7.moveTo(37, cvs7.height-22);
    ctx7.lineTo(32, cvs7.height-17);
    ctx7.lineTo(37, cvs7.height-12);
    ctx7.closePath();
    ctx7.moveTo(113, cvs7.height-22);
    ctx7.lineTo(118, cvs7.height-17);
    ctx7.lineTo(113, cvs7.height-12);
    ctx7.closePath();
    ctx7.fill();
    ctx7.stroke();
    // Vertical
    ctx7.fillStyle="black";
    ctx7.fillRect(56,cvs7.height-25.5,6,18);
    ctx7.fillRect(50,cvs7.height-20,18,6);
    ctx7.fillRect(80,cvs7.height-20,18,6);
  // Horizontal L 
    ctx7.strokeStyle="black";
    ctx7.lineWidth=4;
    ctx7.beginPath();
    ctx7.moveTo(18, cvs7.height-22);
    ctx7.lineTo(14, cvs7.height-17);
    ctx7.lineTo(18, cvs7.height-12);
    ctx7.closePath();
    ctx7.moveTo(11, cvs7.height-22);
    ctx7.lineTo(7, cvs7.height-17);
    ctx7.lineTo(11, cvs7.height-12);
    ctx7.closePath();
    ctx7.moveTo(139, cvs7.height-22);
    ctx7.lineTo(143, cvs7.height-17);
    ctx7.lineTo(139, cvs7.height-12);
    ctx7.closePath();
    ctx7.moveTo(132, cvs7.height-22);
    ctx7.lineTo(136, cvs7.height-17);
    ctx7.lineTo(132, cvs7.height-12);
    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-54,140,18);
  ctx7.strokeStyle="#000080";
  ctx7.lineWidth=2.5;
  ctx7.strokeRect(cvs7.width-145,cvs7.height-54,140,18);
  //var str="QUAL>="+localStorage.getItem("_QUAL")+";";
  var headstr="VarFilt."
  var str="Q≧"+localStorage.getItem("_QUAL");
  var str2="DP≧"+localStorage.getItem("_DP");
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="11px 'Courier'";
  ctx7.font="12px 'Arial'";
  ctx7.fillText(headstr,cvs7.width-142,cvs7.height-42);
  ctx7.fillText(str,cvs7.width-102,cvs7.height-42);
  ctx7.fillText(str2,cvs7.width-52,cvs7.height-42);
}

// Indicator: NULL of Depth
function _drawIndicator_NULL(Ix,Iy) {
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="PaleGoldenrod";
  //ctx7.fillRect(Ix+40,Iy+3,80,12);
  ctx7.fillRect(Ix+40,Iy+3,65,10);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  if (localStorage.getItem('_CSTM') == "on"){
    ctx7.fillText(en.cstm_kind+"=NA",Ix+50,Iy+12);
  }else{
    //ctx7.fillText("DEPTH=NULL",Ix+50,Iy+12);
    ctx7.fillText("DEPTH=NA",Ix+50,Iy+12);
  }
}

// Indicator: EFF
function _drawIndicator_EFF(Ix,Iy,flag) {
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  if(flag == 1) {
  ctx7.fillText("snpEff",Ix+4,Iy+13);
  //ctx7.fillStyle="#7fffd4";
  ctx7.fillStyle="#00BFFF";
  //ctx7.fillRect(Ix+43,Iy+3,14,12);
  //ctx7.fillRect(Ix+43,Iy+3,40,12);
  ctx7.fillRect(Ix+43,Iy+3,50,12);
  //ctx7.fillStyle="#00BFFF";
  ctx7.fillStyle="#FFFF00";
  //ctx7.fillRect(Ix+59,Iy+3,14,12);
  //ctx7.fillRect(Ix+85,Iy+3,40,12);
  ctx7.fillRect(Ix+95,Iy+3,40,12);
  } else if (flag == 2) {
  //ctx7.fillStyle="#0000FF";
  ctx7.fillStyle="#EE9A00";
  //ctx7.fillRect(Ix+75,Iy+3,30,12);
  //ctx7.fillRect(Ix+43,Iy+3,40,12);
  ctx7.fillRect(Ix+43,Iy+3,50,12);
  //ctx7.fillStyle="#FFFF00";
  //ctx7.fillStyle="#8B0000";
  ctx7.fillStyle="red";
  //ctx7.fillRect(Ix+107,Iy+3,30,12);
  //ctx7.fillRect(Ix+85,Iy+3,40,12);
  ctx7.fillRect(Ix+95,Iy+3,40,12);
  }
/*
  ctx7.fillStyle="#EE9A00";
  ctx7.fillRect(Ix+107,Iy+3,14,12);
  ctx7.fillStyle="#8B0000";
  ctx7.fillRect(Ix+123,Iy+3,14,12);
*/
  ctx7.textAlign="right";
  //ctx7.font="8px 'Courier'";
  ctx7.font="9px 'Arial'";
  if(flag == 1) {
  ctx7.fillStyle="#000";
  //ctx7.fillText("MODIFIER",Ix+83,Iy+13);
  ctx7.fillText("MODIFIER",Ix+92,Iy+13);
  ctx7.fillText("LOW",Ix+126,Iy+13);
  } else if (flag == 2) {
  ctx7.fillStyle="#000";
  //ctx7.fillText("MODERATE",Ix+83,Iy+13);
  ctx7.fillText("MODERATE",Ix+93,Iy+13);
  ctx7.fillStyle="#fff";
  //ctx7.fillText("HIGH",Ix+115,Iy+13);
  ctx7.fillText("HIGH",Ix+126,Iy+13);
  }
/*
  ctx7.fillText("4",Ix+117,Iy+13);
  ctx7.fillStyle="#fff";
  ctx7.fillText("5",Ix+133,Iy+13);
*/
}

// Indicator: nucleotide
function _drawIndicator_Nuc(Ix,Iy) {
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillText("SNP",Ix+4,Iy+13);
  ctx7.fillStyle="rgba(255,193,37,1.0)";
  ctx7.fillRect(Ix+43,Iy+3,22,12);
  ctx7.fillStyle="rgba(218,107,169,1.0)";
  ctx7.fillRect(Ix+67,Iy+3,22,12);
  ctx7.fillStyle="rgba(60,179,113,1.0)";
  ctx7.fillRect(Ix+91,Iy+3,22,12);
  ctx7.fillStyle="rgba(0,100,255,1.0)";
  ctx7.fillRect(Ix+115,Iy+3,21,12);
  ctx7.textAlign="right";
  //ctx7.font="8px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillStyle="#000";
  ctx7.fillText("A",Ix+57,Iy+13);
  ctx7.fillText("T",Ix+81,Iy+13);
  ctx7.fillStyle="#fff";
  ctx7.fillText("G",Ix+105,Iy+13);
  ctx7.fillText("C",Ix+129,Iy+13);
}

// Indicator: indel  one-base
function _drawIndicator_IndelOnebase(Ix,Iy) {
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillText("INDEL",Ix+4,Iy+13);
  ctx7.fillStyle="rgba(213,94,0,1.0)";
  ctx7.fillRect(Ix+43,Iy+3,46,12);
  ctx7.fillStyle="rgba(86,180,233,1.0)";
  ctx7.fillRect(Ix+91,Iy+3,45,12);
  //ctx7.font="8px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillStyle="#fff";
  ctx7.fillText("INS",Ix+57,Iy+13);
  ctx7.fillText("DEL",Ix+104,Iy+13);
}

// Indicator: DEPTH and custom track
function _drawIndicator_DP(Ix,Iy) {
  var cstm=localStorage.getItem('_CSTM');
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  var cstm_max=en.cstm_max;
  
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  if(cstm=="on"){
    var condArray = localStorage.getItem("_CrtCondition").split("|");
    var cond = parseInt(condArray[0]);
    var valid = 0;
    for(var a=0; a<condArray.length; a++){if(condArray[a]!=""){valid++;}}
    var CondBlockHeight = parseInt(12/valid);
    var drawn = 0;
    var row = 0;
    ctx7.fillText(en.cstm_kind,Ix+5,Iy+13,35);
    ctx7.strokeStyle="#000";
    ctx7.lineWidth=0.2;
    ctx7.strokeRect(Ix+43,Iy+3,70,12);
    for(var b=0; b<condArray.length; b++){
      if(b==0){
        ctx7.fillStyle=en["cstm_max_col"];
      }else{
        ctx7.fillStyle=en["cstm_max_col_para"+b];
      }
      if(condArray[b] != ""){
        if(b > (valid-1)){
          row = valid-1;
        }else{
          row = drawn;
        }
        ctx7.fillStyle=grad_CSTM_array[b](0);
        ctx7.fillRect(Ix+43,Iy+3+parseInt(row*CondBlockHeight),17,CondBlockHeight);
        ctx7.fillStyle=grad_CSTM_array[b]((cstm_max*0.25)/cstm_max);
        ctx7.fillRect(Ix+59,Iy+3+parseInt(row*CondBlockHeight),17,CondBlockHeight);
        ctx7.fillStyle=grad_CSTM_array[b]((cstm_max*0.5)/cstm_max);
        ctx7.fillRect(Ix+76,Iy+3+parseInt(row*CondBlockHeight),17,CondBlockHeight);
        ctx7.fillStyle=grad_CSTM_array[b]((cstm_max*0.75)/cstm_max);
        ctx7.fillRect(Ix+93,Iy+3+parseInt(row*CondBlockHeight),17,CondBlockHeight);
        ctx7.fillStyle=grad_CSTM_array[b](1);
        ctx7.fillRect(Ix+110,Iy+3+parseInt(row*CondBlockHeight),26,CondBlockHeight);
        drawn++;
      }
    }
    ctx7.textAlign="right";
    ctx7.fillStyle="#000";
    ctx7.fillText(en.cstm_min,Ix+53,Iy+12);
    //ctx7.fillStyle="yellow";
    ctx7.fillStyle="black";
    ctx7.fillText(parseInt(cstm_max),Ix+134,Iy+12);
  }else{
    ctx7.fillText("DEPTH",Ix+5,Iy+13);
    ctx7.strokeStyle="#000";
    ctx7.lineWidth=0.2;
    //ctx7.strokeRect(Ix+43,Iy+3,70,12);
    ctx7.strokeRect(Ix+43,Iy+3,93,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(en.depth_min,Ix+53,Iy+12);
    ctx7.fillStyle="yellow";
    ctx7.fillText(_getMaxGraDP(),Ix+134,Iy+12);
  }
}

// Indicator: SNP
function _drawIndicator_SNP(Ix,Iy) {
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillText("SNP",Ix+5,Iy+13);
  ctx7.strokeStyle="#000";
  ctx7.lineWidth=0.2;
  //ctx7.strokeRect(Ix+43,Iy+3,70,12);
  ctx7.strokeRect(Ix+43,Iy+3,93,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(en.snp_min-1,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.font="11px 'Arial'";
  ctx7.fillText("Snpblock",Ix+47,Iy+12);
}

// Indicator: INDEL
function _drawIndicator_INDEL(Ix,Iy) {
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  ctx7.fillStyle="#fff";
  ctx7.fillRect(Ix,Iy,140,18);
  ctx7.fillStyle="black";
  ctx7.textAlign="left";
  //ctx7.font="10px 'Courier'";
  ctx7.font="11px 'Arial'";
  ctx7.fillText("INDEL",Ix+5,Iy+13);
  ctx7.strokeStyle="#000";
  ctx7.lineWidth=0.2;
  //ctx7.strokeRect(Ix+43,Iy+3,70,12);
  ctx7.strokeRect(Ix+43,Iy+3,93,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(en.indel_min-1,Ix+53,Iy+12);
  ctx7.fillStyle="#fff";
  ctx7.fillText(_getMaxGraINDEL(),Ix+133,Iy+12);
}

/////////////////////////////////////////////// Convert Canvas to PNG
function _drawExportImg() {
  o=_chromosome();
  _messageOnScreen("Now drawing this page.");
  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;
  if (phenotypeFlg) {
  	pngCanvas.height = Objects.TrackH+Objects.NavH+Objects.canvasHeight+170;
  } else {
  	pngCanvas.height = Objects.TrackH+Objects.NavH+Objects.canvasHeight+90;
  }
  //pngContext.fillStyle=_setColor().bgcolor;
  pngContext.fillStyle="#F7F7F9";
  pngContext.fillRect(0,0,pngCanvas.width, pngCanvas.height);
  //pngContext.drawImage(cvs11, 5, 60);
  var nowPos = localStorage.getItem("_nowPos");
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  pngContext.fillStyle=_setColor().reftitle;
  pngContext.font="14px 'Arial'";
  pngContext.fillText(en.reference_name,Objects.titleWidth-80,70);
  pngContext.drawImage(cvs2, Objects.titleWidth+5, 50);
  pngContext.drawImage(cvs9, Objects.titleWidth+o.width+10, 5);
  pngContext.fillStyle="white";
  pngContext.font="16px 'Arial'";
  pngContext.fillText(nowPos,Objects.titleWidth+o.width+20,70);
  pngContext.beginPath();
  pngContext.moveTo(5,110);
  pngContext.lineTo(pngCanvas.width,110);
  pngContext.strokeStyle="#c3c3c3";
  pngContext.lineWidth="1";
  pngContext.stroke();
  pngContext.drawImage(cvs0, 5, 110);
  pngContext.drawImage(cvs1, Objects.titleWidth+5, 110);
  var gwasH = 0;
  var oneBaseH = 0;
  var p3Height = 0;
  if (localStorage.getItem("_Zoom") == "1b") {
	oneBaseH = 66;
  }
  if (localStorage.getItem("_Prm_str")) {
	p3Height = 41;
  }
  var addTrackH = oneBaseH + p3Height;
  if (phenotypeFlg) {
	gwasH = 81;
  	pngContext.beginPath();
  	pngContext.moveTo(5,110+gwasH+addTrackH);
  	pngContext.lineTo(pngCanvas.width,110+gwasH+addTrackH);
  	pngContext.strokeStyle="#c3c3c3";
  	pngContext.lineWidth="1";
  	pngContext.stroke();
  	pngContext.drawImage(cvs19, 5, 110+gwasH+addTrackH);
	var phenotype = localStorage.getItem("_Phenotype");
        var phenotype_prob_name = phenotype.replace(/\s+/g, "_");
        var min_phenotype_prob = localStorage.getItem("_Min_Phenotype_Prob_" + phenotype_prob_name);
	var max_y_value = Math.ceil(min_phenotype_prob);
	var yvalFlg;
	if (max_y_value > 4 && max_y_value < 12) {
                max_y_value = Math.ceil(max_y_value/2);
                yvalFlg = 1;
        } else if (max_y_value >= 12) {
                yvalFlg = Math.ceil(max_y_value/6);
                max_y_value = 6;
        }
        for(var i = 0; i <= max_y_value; i++){
                if (yvalFlg == 1) {
                        ynum = i*2;
                } else if (yvalFlg > 1) {
                        ynum = i*yvalFlg;
                } else {
                        ynum = i;
                }
                var scale_y_value = gwasH - ((gwasH-20) / max_y_value * i);
                pngContext.moveTo(Objects.titleWidth - 5, 185+addTrackH+scale_y_value);
                pngContext.lineTo(Objects.titleWidth , 185+addTrackH+scale_y_value);
                pngContext.lineWidth = 0.2;
                pngContext.fillStyle = _setColor().tracktitle;
                pngContext.font = "11px 'Arial'";
                //ctx13.stroke();
                if (ynum < 10) {
                        pngContext.fillText(ynum, Objects.titleWidth -10, 185+addTrackH+scale_y_value);
                } else {
                        pngContext.fillText(ynum, Objects.titleWidth -15, 185+addTrackH+scale_y_value);
                }
                pngContext.fillText("-", Objects.titleWidth, 190+addTrackH+scale_y_value-3);
        }
	pngContext.fillStyle = _setColor().tracktitle;
        pngContext.font = "12px 'Helvetica'";
        pngContext.textAlign="right";
        titleW = localStorage.getItem("_TitleW");
        if (titleW > 140) {
                pngContext.fillText("GWAS manhattan plot",cvs19.width-40,207+addTrackH);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 19) {
                        phenoname = strname.substring(0,19);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                pngContext.fillText(phenoname,cvs19.width-40, 222+addTrackH);
        } else if (titleW == 140) {
                pngContext.fillText("GWAS",cvs19.width-40,207+addTrackH);
                pngContext.fillText("manhattan plot",cvs19.width-40,222+addTrackH);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 16) {
                        phenoname = strname.substring(0,16);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                pngContext.fillText(phenoname,cvs19.width-40, 237+addTrackH);
        } else if (titleW == 120) {
                pngContext.fillText("GWAS",cvs19.width-40,207+addTrackH);
                pngContext.fillText("manhattan plot",cvs19.width-40,222+addTrackH);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 13) {
                        phenoname = strname.substring(0,12);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                pngContext.fillText(phenoname,cvs19.width-40, 237+addTrackH);
        } else if (titleW == 100) {
                pngContext.fillText("GWAS",cvs19.width-40,207+addTrackH);
                pngContext.fillText("manhattan",cvs19.width-40,222+addTrackH);
                pngContext.fillText("plot",cvs19.width-40,237+addTrackH);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 9) {
                        phenoname = strname.substring(0,9);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                pngContext.fillText(phenoname,cvs19.width-40, 252+addTrackH);
        }
        pngContext.rotate(-Math.PI / 2);
        pngContext.font = "12px 'Arial'";
        pngContext.fillText("-log", -(197+ addTrackH +plotHeight / 2), yWidth - 27);
        var textWidth1 = ctx19.measureText("-log");
        pngContext.textBaseline = "middle";
        pngContext.fillText("10", -(197+ addTrackH +plotHeight / 2 - textWidth1.width + 10), yWidth - 27);
        var textWidth2 = ctx19.measureText("10");
        pngContext.textBaseline = "alphabetic";
        pngContext.fillText("(P)", -(197+ addTrackH+plotHeight / 2 - textWidth1.width - textWidth2.width+5), yWidth - 27);
        pngContext.rotate(Math.PI / 2);

  	pngContext.drawImage(cvs12, Objects.titleWidth+5, 110+gwasH+addTrackH);
  }
  pngContext.beginPath();
  pngContext.moveTo(5,Objects.TrackH+Objects.NavH+gwasH+60);
  pngContext.lineTo(pngCanvas.width,Objects.TrackH+Objects.NavH+gwasH+60);
  pngContext.strokeStyle="#c3c3c3";
  pngContext.lineWidth="1";
  pngContext.stroke();

  var thread=4;
  var jqXHRList = [];
  var datas = [];
  var results = [];
  var dst = "";
  var dstdata = "";
  var acLen = new Array();
  var acPos = new Array();
  acLen[0]=0;
  acPos[0]=1;
  var len = parseInt(Objects.db.length);
  countaAc=parseInt(len/thread);
  mod = (len)%thread;
  if(countaAc==0){thread=1;}
  for (var i = 1; i <= thread; i++) {
  	acLen[i]=countaAc;
        if(i <= (mod)){
        	acLen[i]++;
        }
        acPos[i]=acPos[i-1]+acLen[i-1];
  }
  if(thread != 1){
    for (var i = 1; i <= thread; i++) {
    	jqXHRList.push($.ajax({
        	url: "./bin/"+_backendSelector("data.php"),
                type: "POST",
		async:false,
                cache: false,
                data: {
                	"prm_Ref":localStorage.getItem("_Ref"),
                        "prm_width":localStorage.getItem("_BlockW"),
                        "prm_Zoom":localStorage.getItem("_Zoom"),
                        "prm_Chr":localStorage.getItem("_Chr"),
                        "prm_Pos":localStorage.getItem("_Pos"),
                        "prm_QUAL":localStorage.getItem("_QUAL"),
                        "prm_DP":localStorage.getItem("_DP"),
                        "prm_DP4":localStorage.getItem("_DP4"),
                        "prm_Block":localStorage.getItem("_Block"),
                        "prm_Lists":new Object(_NgetList("db",acPos[i],acLen[i]))
                }
        }
        ));
    }
    $.when.apply($, jqXHRList).done(function () {
	
    	for (var i = 0; i < thread; i++) {
        	var result = arguments[i];
                results = result[0].replace(/(d\d+)/g,'$1dst');
                datas.push(results);
        }
        for (var i = 0; i < datas.length; i++) {
                if (i==0) {
                 	dstdata = datas[i];
                } else {
                        dstdata = dstdata+";"+datas[i];
                }
        }
        dst=dstdata.replace(/^\s+|\s+$/g, "");
	_setData(dst);
	localStorage.setItem("_exportFlg",1);
	_drawNULLBlock();
  	if ( Objects.Snpblock == "off" ) {
  	  if(Objects.Onebase == "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{
     	    switch (Objects.Mode) {
      		case "dp":
        	  _drawDPBlock();
        	  $('#snpt').hide("slow");
        	  break;
        	case "dp+s":
        	  _drawDPBlock();
        	  _drawGTSnp(0);
        	  $('#snpt').show("slow");
        	  break;
        	case "dp+i":
        	  _drawDPBlock();
        	  _drawGTIns(0);
        	  _drawGTDel(0);
        	  $("#snpt").show("slow");
        	  break;
        	case "dp+a":
        	  _drawDPBlock();
        	  _drawGTSnp(1);
        	  _drawGTIns(1);
        	  _drawGTDel(1);
        	  $("#snpt").show("slow");
        	  break;
        	case "s":
        	  _drawGTSnp(0);
        	  $("#snpt").show("slow");
        	  break;
        	case "i":
        	  _drawGTIns(0);
        	  _drawGTDel(0);
        	  $('#snpt').show("slow");
        	  break;
        	case "si":
        	  _drawGTSnp(1);
        	  _drawGTIns(1);
        	  _drawGTDel(1);
        	  $("#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");
    	  }
        }
  	pngContext.drawImage(cvs3, 5, Objects.TrackH+Objects.NavH+gwasH+60);
  	pngContext.drawImage(cvs16, Objects.titleWidth+7, Objects.TrackH+Objects.NavH+gwasH+60);
  	pngContext.beginPath();
  	pngContext.moveTo(5,pngCanvas.height-30);
  	pngContext.lineTo(pngCanvas.width,pngCanvas.height-30);
  	pngContext.strokeStyle="#c3c3c3";
  	pngContext.lineWidth="1";
  	pngContext.stroke();
  	//pngContext.drawImage(cvs5, -5, pngCanvas.height-30);
  	pngContext.drawImage(cvs17,5, pngCanvas.height-30);
  	//pngContext.drawImage(cvs6, Objects.titleWidth+5, pngCanvas.height-30);
  	pngContext.drawImage(cvs18, Objects.titleWidth+7, pngCanvas.height-30);
  	img.src = pngCanvas.toDataURL(type);
  	var pop_win = window.open(
 	                "",
                  "_blank",
                  "width=500,height=500,scrollbars=yes,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();
    });
    
    cvs14.width=1;
    cvs14.height=1;
    ctx14.clearRect(0, 0, cvs14.width, cvs14.height);
    ctx14.fillStyle='rgba(0,0,0,0)';
    ctx14.fillRect(0,0,cvs14.width,cvs14.height);
  }
}

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) {
  var eleCont = document.getElementById("content");
  var boundsCont = eleCont.getBoundingClientRect(); 
  var contTop = boundsCont.top;
  var eleCont2 = document.getElementById("content2");
  var boundsCont2 = eleCont2.getBoundingClientRect(); 
  var cont2Top = boundsCont2.top;
  var visible = (cont2Top-contTop);
  var eleCont = document.getElementById("content");
  var fix = eleCont.scrollTop;
  ctx4.putImageData(frameCell, 0, 0);

  if ( str == "left" ) {
    ctx4.fillStyle="rgba(0,0,0,0.3)";
    ctx4.beginPath();
    ctx4.moveTo(0,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width/10*9,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width/10*9,((visible/8)*2)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*4)+fix);
    ctx4.lineTo(cvs4.width/10*9,((visible/8)*6)+fix);
    ctx4.lineTo(cvs4.width/10*9,((visible/8)*5)+fix);
    ctx4.lineTo(0,((visible/8)*5)+fix);
    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,(visible/2)+fix);
    ctx4.lineTo(cvs4.width/10,((visible/8)*2)+fix);
    ctx4.lineTo(cvs4.width/10,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*5)+fix);
    ctx4.lineTo(cvs4.width/10,((visible/8)*5)+fix);
    ctx4.lineTo(cvs4.width/10,((visible/8)*6)+fix);
    ctx4.closePath();
    ctx4.fill();
    ctx4.strokeStyle="yellow";
    ctx4.lineWidth=5;
    ctx4.strokeRect(cvs4.width-1,0,1,cvs4.height);
  } 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,(visible/2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*6)+fix);
    ctx4.closePath();
    ctx4.fill();
    ctx4.beginPath();
    ctx4.moveTo(zp+za,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*2)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*4)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*6)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*5)+fix);	
    ctx4.lineTo(zp+za,((visible/8)*5)+fix);
    ctx4.closePath();
    ctx4.fill();
  } else if ( str == "zoomInC" ) {
    var za=parseInt(cvs4.width*a/b);//(newbsize/currentbsize_wid)
    var zp=(cvs4.width/2)-(za/2);//(trimd region?)
    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,(visible/2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*6)+fix);
    ctx4.closePath();
    ctx4.fill();
    ctx4.beginPath();
    ctx4.moveTo(zp+za,((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*3)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*2)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*4)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*6)+fix);
    ctx4.lineTo(cvs4.width-(zp/5),((visible/8)*5)+fix);
    ctx4.lineTo(zp+za,((visible/8)*5)+fix);
    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,(visible/2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*2)+fix);
    ctx4.lineTo(zp/5,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*3)+fix);
    ctx4.lineTo(zp,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*5)+fix);
    ctx4.lineTo(zp/5,((visible/8)*6)+fix);
    ctx4.closePath();
    ctx4.fill();
    ctx4.beginPath();
    ctx4.moveTo(zp+za,((visible/8)*3)+fix);
    ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,((visible/8)*3)+fix);
    ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,((visible/8)*2)+fix);
    ctx4.lineTo(cvs4.width,((visible/8)*4)+fix);
    ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,((visible/8)*6)+fix);
    ctx4.lineTo(zp+za+(cvs4.width-zp-za)/5*4,((visible/8)*5)+fix);
    ctx4.lineTo(zp+za,((visible/8)*5)+fix);
    ctx4.closePath();
    ctx4.fill();
  }
}

function _drawZoombar(){
  var htop = $("#top").height();
  $("#zoombar").css('top',htop+30);
  var InfoW = parseInt($("#showPos").width()) + parseInt(8);
  var abspos = parseInt(cvs2.width/2) + parseInt($(".title").width())+ parseInt(10);
  //alert(cvs2.width);
/*
  var titleW = localStorage.getItem("_TitleW");
  if(parseInt(titleW)+parseInt(o.width)+parseInt(20) > 660) {
  	$("#zoombar").css('left',abspos+'px');
  } else {
	$("#zoombar").css('left','660px');
  }
*/
  var chgchrFlg = localStorage.getItem("_chrFlg");
  if(chgchrFlg != '1') { //if change width, draw zoombar on half of track width
/*
  	if(o.width > parseInt(cvs2.width)/2 - 20 || abspos > 733) {
  	      $("#zoombar").css('left',abspos+'px');
  	} else {
  	      $("#zoombar").css('left','733px');
  	      //$("#zoombar").css('left','660px');
  	}
*/
	if (abspos > 660) {
		$("#zoombar").css('left',abspos+'px');
	} else {
		$("#zoombar").css('left','660px');
	}
  } else {
	localStorage.setItem('_chrFlg', '0');
  }

  var elem = document.getElementById('cvs_zbar');
  if (InfoW < 540) {
  	elem.setAttribute("width","540".toString());
  	ctx9.fillStyle="#302833";
  	ctx9.fillRect(0,0,"562",cvs9.height);
  } else {
  	elem.setAttribute("width",InfoW.toString());
	ctx9.fillStyle="#302833";
	ctx9.fillRect(0,0,InfoW,cvs9.height);
  }
/*
  ctx9.fillStyle="#302833";
  ctx9.fillRect(0,0,InfoW,cvs9.height);
*/
  ctx9.stroke();
  ctx9.fillStyle=_setColor().zoombar;
  ctx9.fillRect(384,13,6,18);
  ctx9.fillRect(378,19,18,6);
  ctx9.fillRect(413,19,18,6);
  ctx9.setTransform(1, 0, 0, 1, 0, 0);
  //ctx9.font="10px 'Courier'";
  ctx9.font="10px 'Helvetica'";
  frameZoomb=ctx9.getImageData(0, 0, cvs9.width, cvs9.height);

  var zoom = localStorage.getItem("_Zoom");
  var crtpos;
  var start=125;
  ctx9.fillStyle=_setColor().zoombar;
  //ctx9.font="14px 'Century'";
  ctx9.font="14px 'Helvetica'";
  ctx9.fillText("Block size :",9,26);
  ctx9.fillStyle="#ff9900";
  ctx9.fillText(zoom,84,26);
  ctx9.fillStyle=_setColor().zoombar;
  ctx9.fillRect(125,25,227,2);
  for(var i=1; i<=46; i++){
    if(i==1 || i==10 || i==19 || i==28 || i==37 || i==46){
      ctx9.fillRect((start+((i-1)*5)),15,2,10);
    } else if (i==5 || i==14 || i==23 || i==32 || i==41){
      ctx9.fillRect((start+((i-1)*5)),15,1,10);
    } else{
      ctx9.fillRect((start+((i-1)*5)),20,1,5);
    }
  }
  //125+368=493
  ctx9.font="10px 'Helvetica'";
  ctx9.fillText("1",123,37);
  ctx9.fillText("10",165,37);
  ctx9.fillText("100",208,37);
  ctx9.fillText("1k",255,37);
  ctx9.fillText("10k",297,37);
  ctx9.fillText("100k",339,37);
  ctx9.fillStyle='#ee7948';
  switch (zoom) {
    case "100k":
      crtpos = 349;
      break;
    case "90k":
      crtpos = 344;
      break;
    case "80k":
      crtpos = 339;
      break;
    case "70k":
      crtpos = 334;
      break;
    case "60k":
      crtpos = 329;
      break;
    case "50k":
      crtpos = 324;
      break;
    case "40k":
      crtpos = 319;
      break;
    case "30k":
      crtpos = 314;
      break;
    case "20k":
      crtpos = 309;
      break;
    case "10k":
      crtpos = 304;
      break;
    case "9k":
      crtpos = 299;
      break;
    case "8k":
      crtpos = 294;
      break;
    case "7k":
      crtpos = 289;
      break;
    case "6k":
      crtpos = 284;
      break;
    case "5k":
      crtpos = 279;
      break;
    case "4k":
      crtpos = 274;
      break;
    case "3k":
      crtpos = 269;
      break;
    case "2k":
      crtpos = 264;
      break;
    case "1k":
      crtpos = 259;
      break;
    case "900b":
      crtpos = 254;
      break;
    case "800b":
      crtpos = 249;
      break;
    case "700b":
      crtpos = 244;
      break;
    case "600b":
      crtpos = 239;
      break;
    case "500b":
      crtpos = 234;
      break;
    case "400b":
      crtpos = 229;
      break;
    case "300b":
      crtpos = 224;
      break;
    case "200b":
      crtpos = 219;
      break;
    case "100b":
      crtpos = 214;
      break;
    case "90b":
      crtpos = 209;
      break;
    case "80b":
      crtpos = 204;
      break;
    case "70b":
      crtpos = 199;
      break;
    case "60b":
      crtpos = 194;
      break;
    case "50b":
      crtpos = 189;
      break;
    case "40b":
      crtpos = 184;
      break;
    case "30b":
      crtpos = 179;
      break;
    case "20b":
      crtpos = 174;
      break;
    case "10b":
      crtpos = 169;
      break;
    case "9b":
      crtpos = 164;
      break;
    case "8b":
      crtpos = 159;
      break;
    case "7b":
      crtpos = 154;
      break;
    case "6b":
      crtpos = 149;
      break;
    case "5b":
      crtpos = 144;
      break;
    case "4b":
      crtpos = 139;
      break;
    case "3b":
      crtpos = 134;
      break;
    case "2b":
      crtpos = 129;
      break;
    case "1b":
      crtpos = 125;
      break;
  }
  ctx9.fillRect(crtpos,10,4,15);//Red line
}

function _drawManagerInd(a){
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  if(_isUndefined(a)){
    $("span[id=snp_max_ind]").css("color",en.snp_max_col);
    $("span[id=snp_min_ind]").css("color",en.snp_min_col);
    $("span[id=indel_max_ind]").css("color",en.indel_max_col);
    $("span[id=indel_min_ind]").css("color",en.indel_min_col);
    $("span[id=depth_max_ind]").css("color",en.depth_max_col);
    $("span[id=depth_min_ind]").css("color",en.depth_min_col);
    $("span[id=cstm_max_ind]").css("color",en.cstm_max_col);
    $("span[id=cstm_min_ind]").css("color",en.cstm_min_col);
  }else{
    $("span[id=snp_max_ind]").css("color",$("#manager_snp_max").val());
    $("span[id=snp_min_ind]").css("color",$("#manager_snp_min").val());
    $("span[id=indel_max_ind]").css("color",$("#manager_indel_max").val());
    $("span[id=indel_min_ind]").css("color",$("#manager_indel_min").val());
    $("span[id=depth_max_ind]").css("color",$("#manager_depth_max").val());
    $("span[id=depth_min_ind]").css("color",$("#manager_depth_min").val());
    $("span[id=cstm_max_ind]").css("color",$("#manager_cstm_max").val());
    $("span[id=cstm_min_ind]").css("color",$("#manager_cstm_min").val());
  }
  _changeColorGradient();
}

function _drawMulticondInd(a){
  var en=new Object(JSON.parse(localStorage.getItem("_Env")));
  if(_isUndefined(a)){
    $("span[id=cstm_max_ind_para0]").css("color",en.cstm_max_col);
    $("span[id=cstm_min_ind_para0]").css("color",en.cstm_min_col);
    $("span[id=cstm_max_ind_para1]").css("color",en.cstm_max_col_para1);
    $("span[id=cstm_min_ind_para1]").css("color",en.cstm_min_col_para1);
    $("span[id=cstm_max_ind_para2]").css("color",en.cstm_max_col_para2);
    $("span[id=cstm_min_ind_para2]").css("color",en.cstm_min_col_para2);
    $("span[id=cstm_max_ind_para3]").css("color",en.cstm_max_col_para3);
    $("span[id=cstm_min_ind_para3]").css("color",en.cstm_min_col_para3);
  }else{
    $("span[id=cstm_max_ind_para0]").css("color",$("#manager_cstm_max_para0").val());
    $("span[id=cstm_min_ind_para0]").css("color",$("#manager_cstm_min_para0").val());
    $("span[id=cstm_max_ind_para1]").css("color",$("#manager_cstm_max_para1").val());
    $("span[id=cstm_min_ind_para1]").css("color",$("#manager_cstm_min_para1").val());
    $("span[id=cstm_max_ind_para2]").css("color",$("#manager_cstm_max_para2").val());
    $("span[id=cstm_min_ind_para2]").css("color",$("#manager_cstm_min_para2").val());
    $("span[id=cstm_max_ind_para3]").css("color",$("#manager_cstm_max_para3").val());
    $("span[id=cstm_min_ind_para3]").css("color",$("#manager_cstm_min_para3").val());
  }
  _changeCondColorGradient();
  _drawCondPreview();
}


function _drawCondPreview(){
  var cvs12 = $("#cvs_cond_preview")[0];
  var ctx12 = cvs12.getContext("2d");
  cvs12.width=200;
  cvs12.height=100;
  ctx12.fillStyle="#ffffff";
  ctx12.fillRect(0,0,cvs12.width,cvs12.height);
  ctx12.fillStyle="#000000";
  ctx12.strokeRect(0,0,cvs12.width,cvs12.height);
  ctx12.setTransform(1, 0, 0, 1, 0, 0);
  ctx12.font="10px 'Courier'";
  
  var en = new Object(JSON.parse(localStorage.getItem("_Env")));
  var condArray = localStorage.getItem("_CrtCondition").split("|");
  var cond = parseInt(condArray[0]);
  var dpmx = _getMaxGraDP();
  var cstm = localStorage.getItem('_CSTM');
  var offsetCSTM = en.cstm_min-1;
  
  var valid = 0;
  for(var a=0; a<condArray.length; a++){if(condArray[a]!=""){valid++;}}
  //20,10 60*80
  var CondBlockHeight = parseInt(80/valid);
  var drawn = 0;
  for(var b=0; b<condArray.length; b++){
    if(b==0){
      ctx12.fillStyle=en["cstm_max_col"];
    }else{
      ctx12.fillStyle=en["cstm_max_col_para"+b];
    }
    if(condArray[b] != ""){
      if(b > (valid-1)){
        h = 20+parseInt((valid-1)*CondBlockHeight)+((CondBlockHeight-14)/2);
        ctx12.fillRect(20,10+parseInt((valid-1)*CondBlockHeight),60,CondBlockHeight);
      }else{
        h = 20+parseInt(drawn*CondBlockHeight)+((CondBlockHeight-14)/2);
        ctx12.fillRect(20,10+parseInt(drawn*CondBlockHeight),60,CondBlockHeight);
      }
      ctx12.fillStyle="black";
      ctx12.font="14px 'Consolas'";
      ctx12.fillText(Objects.Conditions[condArray[b]].id.substr(0, 10), 100, h);
      drawn++;
    }
  }
}

/*
function _drawPhyloName() {
        var color = _setColor().tracktitle;
        var strname = localStorage.getItem("_Phenotype");
        var phenoname = "";
        if (strname.length > 23) {
                phenoname = strname.substring(0,23);
                phenoname += "..";
        } else {
                phenoname = strname;
        }
        ctx14.clearRect(0, 0, cvs14.width-20, cvs14.height);
        ctx14.fillStyle = _setColor().tracktitle;
        ctx14.beginPath();
        ctx14.font = "11px 'Helvetica'";
        ctx14.textAlign="right";
        ctx14.beginPath();
        ctx14.fillText(phenoname,cvs14.width-20, 14);
        var offgwas = $("#GWAS_plot").height() + $("#content").height();
        $("#content").css("height",offgwas);
}
*/

function _calcPlot() {
        $.ajax({
                url: "./bin/phenotype_prob.php",
                type: "GET",
                cache: false,
                data: {
                        "prm_Phenotype":localStorage.getItem("_Phenotype"),
                        "prm_Zoom":localStorage.getItem("_Zoom"),
                        "prm_Chr":localStorage.getItem("_Chr"),
                        "prm_Pos":localStorage.getItem("_Pos"),
                        "prm_Block":localStorage.getItem("_Block"),
                }
        }).done(function(data){
                console.log(data);
                if(data != null){
                        var o=new Object(JSON.parse(localStorage.getItem("_Phenotypes")));
                        for(var i=0;i<o.length;i++){
                                var phenotype_prob_name = o[i].phenotype.replace(/\s+/g, "_");
                                localStorage.removeItem("_Phenotype_Prob_" + phenotype_prob_name);
                        }
                        n = data.split(";");
                        for (var i = 0; i < n.length; i++) {
                                var a = n[i].split("|");
                                localStorage.setItem("_Phenotype_Prob_" + a[0], a[1]);
				console.log(localStorage.getItem("_Phenotype_Prob_" + a[0]));
                                localStorage.setItem("_Min_Phenotype_Prob_" + a[0], a[2]);
                        }
                }
        })
}

function _drawPlot(pos) {
	var phenotype = localStorage.getItem("_Phenotype");
	var phenotype_prob_name = phenotype.replace(/\s+/g, "_");
	var min_phenotype_prob = localStorage.getItem("_Min_Phenotype_Prob_" + phenotype_prob_name);
	//var max_y_value = Math.ceil(-Math.LOG10E * Math.log(min_phenotype_prob));
	var max_y_value = Math.ceil(min_phenotype_prob);
	plotHeight = parseInt(cvs13.height);
	yWidth = parseInt(cvs13.width);
	ctx13.clearRect(0, 0, yWidth, plotHeight);
	//ctx13.fillStyle = _setColor().bgcolor;
	ctx13.fillStyle = "#dcdcdc";
	ctx13.fillRect(0, 0, yWidth, plotHeight);
	ctx19.fillStyle = "#dcdcdc";
        ctx19.fillRect(0, 0, yWidth, plotHeight);
	//max_y_value=parseInt("1");
	var yvalFlg;
	if (max_y_value > 4 && max_y_value < 12) {
		max_y_value = Math.ceil(max_y_value/2);
		yvalFlg = 1;
	} else if (max_y_value >= 12) {
		yvalFlg = Math.ceil(max_y_value/6);
		max_y_value = 6;
	}
/*
	if (max_y_value > 4 ) {
                max_y_value = Math.ceil(max_y_value/2);
                yvalFlg = 1;
	}
*/
	for(var i = 0; i <= max_y_value; i++){
		if (yvalFlg == 1) {
			ynum = i*2;
		} else if (yvalFlg > 1) {
			ynum = i*yvalFlg;
		} else {
			ynum = i;
		}
		ctx13.beginPath();
		var scale_y_value = plotHeight - ((plotHeight - 20) / max_y_value * i) -5;
	    	ctx13.moveTo(yWidth - 5, scale_y_value);
	    	ctx13.lineTo(yWidth , scale_y_value);
	    	ctx13.lineWidth = 0.2;
	    	ctx13.fillStyle = _setColor().tracktitle;
	    	ctx13.font = "12px 'Arial'";
	    	//ctx13.stroke();
		if (ynum < 10) {
	    		ctx13.fillText(ynum, yWidth - 12, scale_y_value);
		} else {
			ctx13.fillText(ynum, yWidth - 18, scale_y_value);
		}
	    	ctx13.fillText("-", yWidth-5, scale_y_value+3);
	}
	ctx13.fillStyle = _setColor().tracktitle;
	ctx13.font = "12px 'Helvetica'";
        ctx13.textAlign="right";
	titleW = localStorage.getItem("_TitleW");
	if (titleW > 140) {
		ctx13.fillText("GWAS manhattan plot",cvs13.width-40,10);
		var strname = localStorage.getItem("_Phenotype");
		var phenoname = "";
		if (strname.length > 19) {
			phenoname = strname.substring(0,19);
			phenoname += ".."; 
		} else {
			phenoname = strname;
		}
		ctx13.fillText(phenoname,cvs13.width-40, 25);
	} else if (titleW == 140) {
                ctx13.fillText("GWAS",cvs13.width-40,10);
                ctx13.fillText("manhattan plot",cvs13.width-40,25);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 16) {
                        phenoname = strname.substring(0,16);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                ctx13.fillText(phenoname,cvs13.width-40, 40);
        } else if (titleW == 120) {
                ctx13.fillText("GWAS",cvs13.width-40,10);
                ctx13.fillText("manhattan plot",cvs13.width-40,25);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 13) {
                        phenoname = strname.substring(0,12);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                ctx13.fillText(phenoname,cvs13.width-40, 40);
        } else if (titleW == 100) {
                ctx13.fillText("GWAS",cvs13.width-40,10);
                ctx13.fillText("manhattan",cvs13.width-40,25);
                ctx13.fillText("plot",cvs13.width-40,40);
                var strname = localStorage.getItem("_Phenotype");
                var phenoname = "";
                if (strname.length > 9) {
                        phenoname = strname.substring(0,9);
                        phenoname += "..";
                } else {
                        phenoname = strname;
                }
                ctx13.fillText(phenoname,cvs13.width-40, 55);
        }
	ctx13.rotate(-Math.PI / 2);
	ctx13.font = "12px 'Arial'";
	ctx13.fillText("-log", -(plotHeight / 2), yWidth - 25);
	//ctx13.fillText("-log", -(plotHeight / 2), yWidth - 45);
	var textWidth1 = ctx13.measureText("-log");
	ctx13.textBaseline = "middle";
	ctx13.fillText("10", -(plotHeight / 2 - textWidth1.width + 5), yWidth - 25);
	var textWidth2 = ctx13.measureText("10");
	ctx13.textBaseline = "alphabetic";
	ctx13.fillText("(P)", -(plotHeight / 2 - textWidth1.width - textWidth2.width), yWidth - 25);
	ctx13.rotate(Math.PI / 2);
	//ctx12.clearRect(0, 0, Objects.canvasWidth, plotHeight);
	ctx12.clearRect(0, 0, Objects.canvasWidth, plotHeight);
	//ctx12.clearRect(0, 0, 1035, plotHeight);
	//ctx12.fillStyle = "white";
	ctx12.fillStyle = "#F7F7F9";
	//ctx12.fillRect(0, 0, Objects.canvasWidth, plotHeight);
	//ctx12.fillRect(0, 0, 1035, 120);
	ctx12.fillRect(0, 0, Objects.canvasWidth, 80);
	var rowHeight = 40;
	if(localStorage.getItem("_TrackID") == "on"){
		rowHeight = 80;
	}

	//var o = new Object(JSON.parse(localStorage.getItem("_Phenotype_Prob_" + phenotype_prob_name)));
	//_calcPlot();
	var o = new Object(JSON.parse(localStorage.getItem("_Phenotype_Prob_" + phenotype_prob_name)));
	//ctx12.fillStyle = "black";
	for (var i = 0; i < o.length; i++){
		if ( pos === undefined) {
			ctx12.fillStyle = "gray";
		} else {
			if (o[i].pos == pos) {
				ctx12.fillStyle = "red";
			} else {
				ctx12.fillStyle = "gray";
			}
		}
		var b = parseInt((o[i].pos-Objects.Pos)/_cvtZoom(Objects.Zoom));
		var e=(b+Objects.Pos)*_cvtZoom(Objects.Zoom);
		var s=e-_cvtZoom(Objects.Zoom)+1;
		var ppos;
		if(_cvtZoom(Objects.Zoom)==1) {
			ppos=(b+0.5/_cvtZoom(Objects.Zoom))*10*localStorage.getItem("_BlockW")/10;
		} else {
			ppos=(b+(o[i].pos-s)/_cvtZoom(Objects.Zoom))*10*localStorage.getItem("_BlockW")/10;
		}
		if (yvalFlg == 1) {
			hpos = plotHeight - ((o[i].prob) * (plotHeight - 20) / max_y_value/2 + 10);
		} else if (yvalFlg > 1) {
			hpos = plotHeight - ((o[i].prob) * (plotHeight - 20) / max_y_value/yvalFlg + 10);
		} else {
			hpos = plotHeight - ((o[i].prob) * (plotHeight - 20) / max_y_value + 10);
		}
		ctx12.beginPath();
		//ctx12.arc(o[i].dot_pos * Objects.canvasWidth + 5 , plotHeight + Math.LOG10E * Math.log(o[i].prob) * (plotHeight - 10) / max_y_value + 15, Objects.BlockW / 4, 0, Math.PI * 2, false);
		ctx12.arc(ppos , hpos, Objects.BlockW / 4, 0, Math.PI * 2, false);
		ctx12.closePath();
		ctx12.fill();
	}

  	// Capture tracks without rules
 	framePlot=ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
 	framePlot1=ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
	_drawRulesforPlot();
}

function _drawRulesforPlot() {
        var m = parseInt(Objects.Block / (40 / 4));
        for(var i = 0; i < m+1; i++){
            if (i==0 || i==m) {
                ctx12.beginPath();
                ctx12.moveTo(Objects.canvasWidth/ m * i, 0);
                ctx12.lineTo(Objects.canvasWidth/ m * i, 80);
                ctx12.lineWidth = 6;
                ctx12.strokeStyle = "rgba(" + [208,208,208,0.5] + ")";
                ctx12.stroke();
            } else {
                ctx12.beginPath();
                ctx12.moveTo(Objects.canvasWidth/ m * i, 0);
                ctx12.lineTo(Objects.canvasWidth/ m * i, 80);
                ctx12.lineWidth = 0.2;
                //ctx1.strokeStyle = "black";
                ctx12.strokeStyle = "rgba(" + [26,26,26,0.5] + ")";
                ctx12.stroke();
            }
	}
}


function _moveVarpos(variant) {
	var info = variant.split("|");
	var chr = info[0];
	var pos = info[1];
        localStorage.setItem('_Chr', chr);
	localStorage.setItem('_Zoom','10k');
	s_from = pos - 50*_cvtZoom(localStorage.getItem('_Zoom'));
        if(pos < 1) {
                s_from = 1;
        }
	s_to = s_from + 100*_cvtZoom(localStorage.getItem('_Zoom'));
	localStorage.setItem('_Tpos',pos);
	_zoomFromGffWindow(chr+" "+s_from+"|"+s_from+"|"+s_to+"|"+chr);
        $('#prm_position_chr').val(chr);
	_drawPlot(pos);
}
function _closeErr() {
	//$("#cvs_clserr").click(function() {
		cvs14.width=1;
		cvs14.height=1;
        	cvs15.width=1;
        	cvs15.height=1;
        	ctx14.clearRect(0, 0, cvs14.width, cvs14.height);
        	ctx14.fillStyle='rgba(0,0,0,0)';
        	ctx14.fillRect(0,0,cvs14.width,cvs14.height);
        	ctx15.clearRect(0, 0, cvs15.width, cvs15.height);
        	ctx15.fillStyle='rgba(0,0,0,0)';
        	ctx15.fillRect(0,0,cvs15.width,cvs15.height);
	//});
}
