/*
* event.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
*/

///////////////////////////////////////////////////////////
// Mouse&Touch events on
///////////////////////////////////////////////////////////
function _initEvents() {
  //Main viewer
  cvs4.addEventListener("mousedown", _mouseDownListner, false);
  cvs4.addEventListener("mousemove", _mouseMoveListner, false);
  cvs4.addEventListener("mouseup", _mouseUpListner, false);
  cvs4.addEventListener("mouseout", _mouseOutListner, false);
  cvs4.addEventListener("dblclick", _mouseDblclickListner, false);
  cvs4.addEventListener("touchstart", _mouseDownListner, false);
  cvs4.addEventListener("touchmove", _mouseMoveListner, false);
  cvs4.addEventListener("touchend", _mouseUpListner, false);
  cvs4.addEventListener("touchcancel", _mouseUpListner, false);
  window.addEventListener("keydown", _doKeyDown, true);
  content.addEventListener("scroll", _mouseScrollListener, true);
  window.addEventListener("resize", _windowResizeListener, true);
  //Nav
  cvs2.addEventListener("mousedown", _mouseDownNavListner, false);
  cvs2.addEventListener("mousemove", _mouseMoveNavListner, false);
  cvs2.addEventListener("touchmove", _mouseMoveNavListner, false);
  cvs2.addEventListener("touchstart", _touchStartNavListner, false);
  cvs2.addEventListener("touchend", _touchEndNavListner, false);
  cvs2.addEventListener("mouseout", _mouseOutNavListner, false);
  cvs2.addEventListener("mouseup", _mouseUpNavListner, false);
  cvs2.addEventListener("touchend", _mouseUpNavListner, false);
  track.addEventListener("mousemove", _mouseMoveDivTrackListener, false);
  track.addEventListener("mouseup", _mouseDropTrackListener, false);
  track.addEventListener("mouseout", _mouseOutDivTrackListener, false);
  track.addEventListener("touchmove", _mouseMoveDivTrackListener, false);
  track.addEventListener("touchend", _mouseDropTrackListener, false);
  //GFF title
  cvs0.addEventListener("mousedown", _mouseDownTrackTitleListner, false);
  cvs0.addEventListener("touchstart", _mouseDownTrackTitleListner, false);
  cvs0.addEventListener("mousemove", _mouseMoveTrackTitleListner, false);
  cvs0.addEventListener("mouseout", _mouseOutTrackTitleListner, false);
  //GFF track
  cvs1.addEventListener("mousedown", _mouseDownTrackListner, false);
  cvs1.addEventListener("touchstart", _touchStartTrackListner, false);
  cvs1.addEventListener("touchmove", _mouseMoveTrackListner, false);
  cvs1.addEventListener("mousemove", _mouseMoveTrackListner, false);
  cvs1.addEventListener("mouseup", _mouseUpTrackListner, false);
  cvs1.addEventListener("mouseout", _mouseUpTrackListner, false);
  cvs1.addEventListener("touchend", _mouseUpTrackListner, false);
  // Accession title
  cvs3.addEventListener("mousedown", _mouseDownTitleListner, false);
  cvs3.addEventListener("mousemove", _mouseMoveTitleListner, false);
  cvs3.addEventListener("mouseout", _mouseOutTitleListner, false);
  cvs3.addEventListener("mousewheel", _mouseOutTitleListner, false);
  cvs3.addEventListener("DOMMouseScroll", _mouseOutTitleListner, false);
  cvs3.addEventListener("touchcancel", _mouseOutTitleListner, false);
  cvs3.addEventListener("touchmove", _mouseMoveTitleListner, false);
  cvs3.addEventListener("touchend", _mouseDownTitleListner, false);  
  //indicator
  cvs7.addEventListener("mousedown", _mouseDownIndListner, false);
  cvs7.addEventListener("touchstart", _mouseDownIndListner, false);
  cvs7.addEventListener("mousemove", _mouseMoveIndListner, false);
  cvs7.addEventListener("mousedown", _mouseDownDirListner, false);
  cvs7.addEventListener("touchend", _mouseDownDirListner, false);
  cvs7.addEventListener("mousemove", _mouseMoveDirListner, false);
  cvs7.addEventListener("touchmove", _mouseMoveDirListner, false);
  cvs7.addEventListener("mouseout", _mouseOutDirListner, false);
  //Zoom-bar
  cvs9.addEventListener("mousemove", _mouseMoveZoomListner, false);
  cvs9.addEventListener("mouseout", _mouseOutZoomListner, false);
  cvs9.addEventListener("mousedown", _mouseUpZoomListner, false);
  cvs9.addEventListener("touchmove", _mouseMoveZoomListner, false);
  cvs9.addEventListener("touchstart", _mouseDownZoomListner, false);
  cvs9.addEventListener("touchend", _mouseUpZoomListner, false);
  //for block informations
  cvs10.addEventListener("mouseout", _mouseOutCellListner, false);
  track.addEventListener("mouseenter", _mouseOutCellListner, false);
  content2.addEventListener("mouseenter", _mouseOutCellListner, false);
  cvs3.addEventListener("mouseenter", _mouseOutCellListner, false);
  cvs10.addEventListener("mousedown", _mouseUpCellListner, false);
  cvs10.addEventListener("mousemove", _mouseMoveCellListner, false);
  cvs10.addEventListener("touchmove", _mouseMoveCellListner, false);
  cvs10.addEventListener("touchend", _mouseUpCellListner, false);
}

///////////////////////////////////////////////////////////
// Mouse&Touch events on
///////////////////////////////////////////////////////////
function _removeEvents() {
  cvs4.removeEventListener("mousedown", _mouseDownListner, false);
  cvs4.removeEventListener("mousemove", _mouseMoveListner, false);
  cvs4.removeEventListener("mouseup", _mouseUpListner, false);
  cvs4.removeEventListener("mouseout", _mouseOutListner, false);
  cvs4.removeEventListener("dblclick", _mouseDblclickListner, false);
  cvs4.removeEventListener("touchstart", _mouseDownListner, false);
  cvs4.removeEventListener("touchmove", _mouseMoveListner, false);
  cvs4.removeEventListener("touchend", _mouseUpListner, false);
  cvs4.removeEventListener("touchcancel", _mouseUpListner, false);
  window.removeEventListener("keydown", _doKeyDown, true);
  content.removeEventListener("scroll", _mouseScrollListener, true);
  window.removeEventListener("resize", _windowResizeListener, true);

  cvs2.removeEventListener("mousedown", _mouseDownNavListner, false);
  cvs2.removeEventListener("mousemove", _mouseMoveNavListner, false);
  cvs2.removeEventListener("touchmove", _mouseMoveNavListner, false);
  cvs2.removeEventListener("touchstart", _touchStartNavListner, false);
  cvs2.removeEventListener("touchend", _touchEndNavListner, false);
  cvs2.removeEventListener("mouseout", _mouseOutNavListner, false);
  cvs2.removeEventListener("mouseup", _mouseUpNavListner, false);
  cvs2.removeEventListener("touchend", _mouseUpNavListner, false);
  track.removeEventListener("mousemove", _mouseMoveDivTrackListener, false);
  track.removeEventListener("mouseup", _mouseDropTrackListener, false);
  track.removeEventListener("mouseout", _mouseOutDivTrackListener, false);
  track.removeEventListener("touchmove", _mouseMoveDivTrackListener, false);
  track.removeEventListener("touchend", _mouseDropTrackListener, false);

  cvs0.removeEventListener("mousedown", _mouseDownTrackTitleListner, false);
  cvs0.removeEventListener("touchstart", _mouseDownTrackTitleListner, false);
  cvs0.removeEventListener("mousemove", _mouseMoveTrackTitleListner, false);
  cvs0.removeEventListener("mouseout", _mouseOutTrackTitleListner, false);

  cvs1.removeEventListener("mousedown", _mouseDownTrackListner, false);
  cvs1.removeEventListener("touchstart", _touchStartTrackListner, false);
  cvs1.removeEventListener("touchmove", _mouseMoveTrackListner, false);
  cvs1.removeEventListener("mousemove", _mouseMoveTrackListner, false);
  cvs1.removeEventListener("mouseout", _mouseUpTrackListner, false);
  cvs1.removeEventListener("mouseout", _mouseUpTrackListner, false);
  cvs1.removeEventListener("touchend", _mouseUpTrackListner, false);

  cvs3.removeEventListener("mousedown", _mouseDownTitleListner, false);
  cvs3.removeEventListener("mousemove", _mouseMoveTitleListner, false);
  cvs3.removeEventListener("mouseout", _mouseOutTitleListner, false);
  cvs3.removeEventListener("mousewheel", _mouseOutTitleListner, false);
  cvs3.removeEventListener("DOMMouseScroll", _mouseOutTitleListner, false);
  cvs3.removeEventListener("touchcancel", _mouseOutTitleListner, false);
  cvs3.removeEventListener("touchmove", _mouseMoveTitleListner, false);
  cvs3.removeEventListener("touchend", _mouseDownTitleListner, false);

  cvs7.removeEventListener("mousedown", _mouseDownIndListner, false);
  cvs7.removeEventListener("touchstart", _mouseDownIndListner, false);
  cvs7.removeEventListener("mousemove", _mouseMoveIndListner, false);
  cvs7.removeEventListener("mousedown", _mouseDownDirListner, false);
  cvs7.removeEventListener("touchend", _mouseDownDirListner, false);
  cvs7.removeEventListener("mousemove", _mouseMoveDirListner, false);
  cvs7.removeEventListener("touchmove", _mouseMoveDirListner, false);
  cvs7.removeEventListener("mouseout", _mouseOutDirListner, false);

  cvs9.removeEventListener("mousemove", _mouseMoveZoomListner, false);
  cvs9.removeEventListener("mouseout", _mouseOutZoomListner, false);
  cvs9.removeEventListener("mousedown", _mouseUpZoomListner, false);
  cvs9.removeEventListener("touchmove", _mouseMoveZoomListner, false);
  cvs9.removeEventListener("touchstart", _mouseDownZoomListner, false);
  cvs9.removeEventListener("touchend", _mouseUpZoomListner, false);

  cvs10.removeEventListener("mouseout", _mouseOutCellListner, false);
  track.removeEventListener("mouseenter", _mouseOutCellListner, false);
  content2.removeEventListener("mouseenter", _mouseOutCellListner, false);
  cvs3.removeEventListener("mouseenter", _mouseOutCellListner, false);
  cvs10.removeEventListener("mousedown", _mouseUpCellListner, false);
  cvs10.removeEventListener("mousemove", _mouseMoveCellListner, false);
  cvs10.removeEventListener("touchmove", _mouseMoveCellListner, false);
  cvs10.removeEventListener("touchend", _mouseUpCellListner, false);
}

var RESTIMER;
function _windowResizeListener(e){
  if(RESTIMER){clearTimeout(RESTIMER);}
  RESTIMER = setTimeout(function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("scroll", true, true);
    content.dispatchEvent(evt);
  }, 400);
}

var VIEWSTART=0;
var VIEWLEN=0;
var SCRTIMER;
var FROMSCROLL;
function _mouseScrollListener(e){
  var ONDIALOG=false;
  if ($('#dialog_csv').is(":visible")) ONDIALOG=true;
  if ($('#dialog_fa').is(":visible")) ONDIALOG=true;
  if ($('#dialog_p3').is(":visible")) ONDIALOG=true;
  if ($('#dialog_go').is(":visible")) ONDIALOG=true;
  if ($('#dialog_track').is(":visible")) ONDIALOG=true;
  if ($('#dialog_reset').is(":visible")) ONDIALOG=true;
  if ($('#dialog_chref').is(":visible")) ONDIALOG=true;
  if ($('#dialog_list').is(":visible")) ONDIALOG=true;
  var SCRTIMERVal;

  if(!ONDIALOG){
    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+parseInt(Objects.BlockH*1.5);
    var accStr = eleCont.scrollTop;
    var skipTop = parseInt(accStr/Objects.BlockH);// considering value=0
    var visibleCont = parseInt(visible/Objects.BlockH);//top +1 bottom +1
    
    FROMSCROLL=true;
    
    if(isNaN(skipTop)){skipTop = 1;}
    if(isNaN(visibleCont)){
      if(parseInt(baseobj.length) > 49){
        visibleCont = 49;
      }else{
        visibleCont=baseobj.length-1;
      }
    }else{
      if(visibleCont >49){
        visibleCont = 49;
      }else{
        visibleCont=visibleCont-1;
      }
    }
    if(skipTop==0){skipTop=1;}
    VIEWSTART=skipTop;
    VIEWLEN=visibleCont;
    var str="";
    var array = new Array;
    var loaded = 0;
    array=_NgetList("db",skipTop,visibleCont+1,"_Lists");
    for(var i=0; i < array.length; i++){
      if(_getCompressedData(array[i]).indexOf("{\"dp\":\"x\"}") != -1 || _getCompressedData(array[i]).indexOf("{\"dp\":\"x\",\"rdp\":\"x\"}") != -1){
        loaded++;
      }
      str += array[i]+",";
    }
    str=str.slice(0,-1);
    localStorage.setItem("_ListsTgt", str);
    if(SCRTIMER){clearTimeout(SCRTIMER);}
    if(loaded > 0){
      SCRTIMER = setTimeout(function(){
        _showLoading();
        _execCanvas();
        SCRTIMER=SCRTIMERVal;
      }, 300);
    }
    return;
  }
}

function _mouseOutDivTrackListener(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x3=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y3=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x3=parseInt(e.clientX)-parseInt(rect.left);
    XY.y3=parseInt(e.clientY)-parseInt(rect.top);
  }
}

function _mouseMoveDivTrackListener(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
  XY.x3=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
  XY.y3=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
  XY.x3=parseInt(e.clientX)-parseInt(rect.left);
  XY.y3=parseInt(e.clientY)-parseInt(rect.top);
  }
  
  if(XY.x2==XY.x3 && movetoObj==true) {
    var drawWid=0;
    ctx2.putImageData(frameChr, 0, 0);
    _drawMeter(Objects.Pos,XY.x3);
    drawWid=XY.x3-XY.x1;
    //draw highlighted region
    document.body.style.cursor = "crosshair";
    ctx2.fillStyle="rgba(255,193,37,0.8)";
    ctx2.fillRect(XY.x1, cvs2.height-11, drawWid ,11);
    ctx2.beginPath();
    ctx2.strokeStyle="blue";
    ctx2.lineWidth=1;
    ctx2.moveTo(XY.x1,cvs2.height-11);
    ctx2.lineTo(XY.x3,cvs2.height-11);
    ctx2.lineTo(XY.x3,cvs2.height);
    ctx2.lineTo(XY.x1,cvs2.height);
    ctx2.lineTo(XY.x1,cvs2.height-11);
    ctx2.stroke();
    //print left position
    ctx2.beginPath();
    ctx2.moveTo(XY.x1,40);
    ctx2.lineTo(XY.x1+2,28);
    ctx2.lineTo(XY.x1+10,28);
    ctx2.closePath();
    ctx2.fillStyle=_setColor().pointercolor;
    ctx2.fill();
    ctx2.fillStyle=_setColor().pointerstringcolor;
    ctx2.textAlign="left";
    ctx2.fillText(_printPos(Objects.Pos+parseInt(XY.x1/Objects.BlockW)), XY.x1+13, 36);
    dragonObj=true;
  }else if(XY.x2 != XY.x3 && (XY.y2 <= 1 || XY.x2 <= 1 || XY.y2 >= cvs2.height || XY.x3 >= cvs2.width )){
    XY.x2=0;
    XY.x1=0;
    _drawTOP();
    movetoObj=false;
    dragonObj=false;
  }else{
    //pass
  } 
}

function _mouseDropTrackListener(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x3=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y3=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x3=parseInt(e.clientX)-parseInt(rect.left);
    XY.y3=parseInt(e.clientY)-parseInt(rect.top);
  }

  if(XY.x2==XY.x3 && movetoObj == true && dragonObj == true) {
    var x1 = XY.x1/cvs2.width;
    var x3 = XY.x3/cvs2.width;
    var posA = parseInt((localStorage.getItem('_Pos')-1)*_cvtZoom(Objects.Zoom)+(Objects.Block*x1)*_cvtZoom(Objects.Zoom));
    var posB= parseInt((localStorage.getItem('_Pos')-1)*_cvtZoom(Objects.Zoom)+(Objects.Block*x3)*_cvtZoom(Objects.Zoom));
    if(posA <= posB){
      _execSearch("the target|"+posA+"|"+posB+"|"+Objects.Chr+"|");
    }else{
      _execSearch("the target|"+posB+"|"+posA+"|"+Objects.Chr+"|");
    }
  }else{
    _drawTOP();
  }
  movetoObj=false;
  dragonObj=false;
  document.body.style.cursor = "default";
}

/////////////////////////////////////////////// Mouse moving on Navigation
function _mouseMoveNavListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  
  ctx2.putImageData(frameChr, 0, 0);
  var o=_chromosome();
  if(XY.y2 < 30 && XY.x2 <= o.width) {
    var t=XY.x2/o.width;
    var p=(parseInt(_last('1k')*t)/1000).toFixed(2);
    document.body.style.cursor = "pointer";
    ctx2.fillStyle=_setColor().chrareaselected;
    if (XY.x2+o.area+1>o.width){
      ctx2.fillRect(o.width-o.area, 6, o.area+1, 21);
    } else if (XY.x2-o.area/2<0){
      ctx2.fillRect(0, 6, o.area+1, 21);
    } else {
      ctx2.fillRect(XY.x2-o.area/2, 6, o.area+1, 21);
    }
    if ( XY.x2 > o.width-134 ) {
      y=9;
    } else {
      y=20;
    }
    ctx2.textAlign="left";
    ctx2.fillStyle=_setColor().chrstringcolor;
    ctx2.fillText(String(p)+" M",XY.x2+10,y);

  // On the chromosome navigation
  } else if(XY.y2 < 32 && XY.x2 >= cvs2.width/2) {
    document.body.style.cursor = "pointer";
    if ( XY.x2 > cvs2.width/2+cvs2.width/2/5*2-o.s1 && XY.x2 < cvs2.width/2+cvs2.width/2/5*3+o.s2) {
      var s=XY.x2-(cvs2.width/2/5/2);
      if (s<cvs2.width/2+cvs2.width/2/5*2-o.s1){s=cvs2.width/2+cvs2.width/2/5*2-o.s1;}
      if ((s+cvs2.width/2/5)>cvs2.width/2+cvs2.width/2/5*3+o.s2){s=cvs2.width/2+cvs2.width/2/5*3+o.s2-cvs2.width/2/5;}
      ctx2.fillStyle=_setColor().detailareaselected;
      ctx2.fillRect(s, 10, (cvs2.width/2/5), 14);
      var p=XY.x2-(cvs2.width/2/5/2)-(cvs2.width/2+cvs2.width/2/5*2);
      var t=parseInt(p)/(cvs2.width/2/5);
      var k=Objects.Pos+parseInt(Objects.Block*t);
      if ( k < 1 ) { k=1;}
      ctx2.fillStyle=_setColor().detailupstring;
      ctx2.textAlign="left";
      ctx2.fillText(_printPos(k), s+12, 20);
      ctx2.beginPath();
      ctx2.moveTo(s+1,22);
      ctx2.lineTo(s+8,16);
      ctx2.lineWidth=1;
      ctx2.strokeStyle=_setColor().detailupstring;
      ctx2.stroke();
    }
  }else {
    document.body.style.cursor = "default";
  }
  if(XY.y2 > 32 && XY.y2 < cvs2.height && XY.x2 > 0 && XY.x2 < cvs2.width) {
    document.body.style.cursor = "crosshair";
  }
}

/////////////////////////////////////////////// Mouse down on Track
function _mouseDownTrackListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
      XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
      XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
      XY.x1=parseInt(e.clientX)-parseInt(rect.left);
      XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);

  if ( IDo.id != "" ) {
    var en=new Object(JSON.parse(localStorage.getItem("_Env")));
    _setHistory("search,"+IDo.id);
    localStorage.setItem('_Keyword', IDo.id); 
    _drawCanvas();
    
    var elementTrack = document.getElementById("cvs_tracks"); 
    var elementcell = document.getElementById("cellinf"); 
    var elementcellDoc = document.getElementById("cellinf_doc"); 
    var bounds = elementTrack.getBoundingClientRect(); 
    var boux = bounds.left;
    var bouy = bounds.top;
    elementcell.style.left = (boux+XY.x1+10)+'px';
    elementcell.style.top = (bouy+XY.y1)+'px'; 
    elementcellDoc.style.width = (230)+"px";
    elementcellDoc.style.height = (240)+"px";
    elementcellDoc.style.backgroundColor = 'white';
    
    var end = (parseInt(IDo.len)+parseInt(IDo.pos)-1);
    var link = _escapeHTML(en.external_link+IDo.ln+en.external_link_suffix);
    _createGffWindow(IDo.id, IDo.pos, end, link);
    isDrag=false;
  } else if (!rightclick) isDrag=true;
}

function _zoomFromGffWindow(str){
  _execSearch(str);
  _windowGffClose();
}

/////////////////////////////////////////////// touch start on Track
function _touchStartTrackListner(e) {
  var rowHeight=40;
  var trackVirwMode=localStorage.getItem("_TrackID");
  if(trackVirwMode=="on"){rowHeight=80;}
  var eachRowHeight=rowHeight/4;
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
      XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
      XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
      XY.x1=parseInt(e.clientX)-parseInt(rect.left);
      XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);
  IDo.id="";
  IDo.ln="";
  IDo.s="";
  IDo.e="";
  IDo.pos="";
  IDo.len="";  

  if (_cvtZoom(Objects.Zoom)<5000){
    var to=new Object();
    var o=new Object(JSON.parse(localStorage.getItem('_Tracks')));
    document.body.style.cursor = "default";
    var th=0;
    for (i=0;i<o.length;i++){
      if(o[i].track==Objects.Tracks[parseInt(XY.y1/rowHeight)]){
        to=Object(JSON.parse(localStorage.getItem('_Track_'+i)));
        th=parseInt(o[i].h);
        break;
      }
    }
    for(j=0;j<to.length;j++){
      if ( to[j].s*Objects.BlockW <= XY.x1 && to[j].e*Objects.BlockW >= XY.x1 && th==4 && to[j].name!=""
            && parseInt(XY.y1/rowHeight)*rowHeight+(to[j].h-1)*eachRowHeight <= XY.y1 && parseInt(XY.y1/rowHeight)*rowHeight+(to[j].h-1)*eachRowHeight+10 >= XY.y1 ) {
        if(XY.x1>cvs1.width-110){
          x=XY.x1-10;
          ctx1.textAlign="right";
        } else {
          x=XY.x1+12;
          ctx1.textAlign="left";
        }
        if((XY.y1+10)>cvs1.height){
          y=cvs1.height;
        } else {
          y=XY.y1+10;
        }
        ctx1.fillStyle=_setColor().locusid;
        var strand="";
        if ( to[j].strand == "0" ) {
          strand="-";
        }else{
          strand="+";
        }
        if(trackVirwMode!="on"){ctx1.fillText(to[j].id+" ("+strand+" strand)",x,y);}
        // Set ID info
        IDo.id=_escapeHTML(to[j].id);
        IDo.ln=_escapeHTML(to[j].ln);
        IDo.s=_escapeHTML(to[j].s);
        IDo.e=_escapeHTML(to[j].e);
        IDo.pos=_escapeHTML(to[j].pos);
        IDo.len=_escapeHTML(to[j].length);  
        break;
      }
    }
    // Focus red area under gene when 1b
    if ( _cvtZoom(Objects.Zoom) == 1 ) {
      if ( XY.y1 > cvs1.height-15 && XY.y1 < cvs1.height ) {
        var pos=parseInt(XY.x1/Objects.BlockW);
        ctx4.fillStyle="rgba(220,0,0,0.1)";
        ctx4.lineWidth=1;
        ctx4.fillRect(pos*Objects.BlockW,0,Objects.BlockW,cvs4.height);
        _drawTracks(pos);
      }
    }
  }
  if ( IDo.id != "" ) {
    var en=new Object(JSON.parse(localStorage.getItem("_Env")));
    _setHistory("search,"+IDo.id);
    localStorage.setItem('_Keyword', IDo.id);
    _drawCanvas();
    window.open(en.external_link+IDo.ln+en.external_link_suffix);
  } 
  isDrag=false;
}

/////////////////////////////////////////////// Mouse out from Track
function _mouseOutNavListner(e) {
  if(dragonObj!=true){
    _drawTOP();
    movetoObj=false;
    document.body.style.cursor = "default";
  }
}

/////////////////////////////////////////////// Mouse up from Track
function _mouseUpNavListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
}

/////////////////////////////////////////////// Mouse out from Track
function _mouseUpTrackListner(e) {
  document.body.style.cursor = "default";
  if (isDrag) {
    isDrag=false;
    if(Math.abs(XY.x2-XY.x1)){
      _getData_p(XY.x2-XY.x1);
    }
  } else {
    _drawTOP();
  }
}

/////////////////////////////////////////////// Mouse moving on Track
var IDo=new Object();
function _mouseMoveTrackListner(e) {
  var rowHeight=40;
  var trackVirwMode=localStorage.getItem("_TrackID");
  if(trackVirwMode=="on"){rowHeight=80;}
  var eachRowHeight=rowHeight/4;
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
    isDrag=true;
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  if(isDrag){
    _drawDrag("onTrack");
  } else {
  // Set ID info
  IDo.id="";
  IDo.ln="";
  IDo.s="";
  IDo.e="";
  IDo.pos="";
  IDo.len="";  
  ctx1.putImageData(frameTrackwR, 0, 0);
  ctx4.putImageData(frameCell, 0, 0);
  
  if (_cvtZoom(Objects.Zoom)<5000){
    var to=new Object();
    var o=new Object(JSON.parse(localStorage.getItem('_Tracks')));
    document.body.style.cursor = "default";
    var th=0;
    for (i=0;i<o.length;i++){
      if(o[i].track==Objects.Tracks[parseInt(XY.y2/rowHeight)]){
        to=Object(JSON.parse(localStorage.getItem('_Track_'+i)));
        th=parseInt(o[i].h);
        break;
      }
    }
    for(j=0;j<to.length;j++){
      if ( to[j].s*Objects.BlockW <= XY.x2 && to[j].e*Objects.BlockW >= XY.x2 && th==4 && to[j].name!=""
            && parseInt(XY.y2/rowHeight)*rowHeight+(to[j].h-1)*eachRowHeight <= XY.y2 && parseInt(XY.y2/rowHeight)*rowHeight+(to[j].h-1)*eachRowHeight+10 >= XY.y2 ) {
        document.body.style.cursor = "pointer";
        if(XY.x2>cvs1.width-110){
          x=XY.x2-10;
          ctx1.textAlign="right";
        } else {
          x=XY.x2+12;
          ctx1.textAlign="left";
        }
        if((XY.y2+10)>cvs1.height){
          y=cvs1.height;
        } else {
          y=XY.y2+10;
        }
        ctx1.fillStyle=_setColor().locusid;
        var strand="";
        if ( to[j].strand == "0" ) {
          strand="-";
        }else{
          strand="+";
        }
        if(trackVirwMode!="on"){ctx1.fillText(to[j].id+" ("+strand+" strand)",x,y);}
        
        // Set ID info
        IDo.id=_escapeHTML(to[j].id);
        IDo.ln=_escapeHTML(to[j].ln);
        IDo.s=_escapeHTML(to[j].s);
        IDo.e=_escapeHTML(to[j].e);
        IDo.pos=_escapeHTML(to[j].pos);
        IDo.len=_escapeHTML(to[j].length);  
        break;
      }
    }
    // Focus red area under gene when 1b
    if ( _cvtZoom(Objects.Zoom) == 1 ) {
      if ( XY.y2 > cvs1.height-15 && XY.y2 < cvs1.height ) {
        var pos=parseInt(XY.x2/Objects.BlockW);
        ctx4.fillStyle="rgba(220,0,0,0.1)";
        ctx4.lineWidth=1;
        ctx4.fillRect(pos*Objects.BlockW,0,Objects.BlockW,cvs4.height);
        _drawTracks(pos);
      }
    }
  }
    _drawMeter(Objects.Pos,XY.x2);
  }
}

/////////////////////////////////////////////// Mouse down on Navigation
var movetoObj=false;
var dragonObj=false;
function _mouseDownNavListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);

  if(!rightclick && XY.y1 < cvs2.height/2+5){
    var o=_chromosome();
    var m=o.width;
    // Click on chromsome
    if (XY.x1 > 0 && XY.x1 <= m){
      var t=(XY.x1-o.area/2)/m;
      var p=_checkPos(parseInt(_last(Objects.Zoom)*t),Objects.Zoom);
      _setHistory("position,"+Objects.Chr+","+p+","+Objects.Zoom);
      localStorage.setItem('_Pos', p);
      _showLoading();
      _messageOnScreen("Loading position "+(p*_cvtZoom(Objects.Zoom))+" b");
      FROMSCROLL=false;
      _execCanvas();
    }
    if(XY.y1 < 27 && XY.x1 >= cvs2.width/2) {
      if ( XY.x1 > cvs2.width/2+cvs2.width/2/5*2-o.s1 && XY.x1 < cvs2.width/2+cvs2.width/2/5*3+o.s2) {
        var s=cvs2.width/2+cvs2.width/2/5*2-(XY.x1-cvs2.width/2/5*0.5);
        var p=_checkPos(Objects.Pos-parseInt(s/(cvs2.width/2/5)*Objects.Block),Objects.Zoom);
        _setHistory("position,"+Objects.Chr+","+p+","+Objects.Zoom);
        localStorage.setItem('_Pos', p);
        _showLoading();
        _messageOnScreen("Loading position "+(p*_cvtZoom(Objects.Zoom))+" b");
        FROMSCROLL=false;
        _execCanvas();
      }
    }
  }
  if(XY.y1 > 32 && XY.y1 < cvs2.height && XY.x1 > 0 && XY.x1 < cvs2.width) {
    movetoObj=true;
  }
}

/////////////////////////////////////////////// touch start down on Navigation
function _touchStartNavListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  if(XY.y1 > 32 && XY.y1 < cvs2.height && XY.x1 > 0 && XY.x1 < cvs2.width) {
    movetoObj=true;
  }
}
/////////////////////////////////////////////// touch end down on Navigation
function _touchEndNavListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
      XY.x2=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
      XY.y2=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
      XY.x2=parseInt(e.clientX)-parseInt(rect.left);
      XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);

  if(!rightclick && XY.y2 < cvs2.height/2+5){
    var o=_chromosome();
    var m=o.width;
    // Click on chromsome
    if (XY.x2 > 0 && XY.x2 <= m){
      var t=(XY.x2-o.area/2)/m;
      var p=_checkPos(parseInt(_last(Objects.Zoom)*t),Objects.Zoom);
      _setHistory("position,"+Objects.Chr+","+p+","+Objects.Zoom);
      localStorage.setItem('_Pos', p);
      _showLoading();
      _messageOnScreen("Loading position "+(p*_cvtZoom(Objects.Zoom))+" b");
      FROMSCROLL=false;
      _execCanvas();
    }

    if(XY.y2 < 27 && XY.x2 >= cvs2.width/2) {
      if ( XY.x2 > cvs2.width/2+cvs2.width/2/5*2-o.s1 && XY.x2 < cvs2.width/2+cvs2.width/2/5*3+o.s2) {
        var s=cvs2.width/2+cvs2.width/2/5*2-(XY.x2-cvs2.width/2/5*0.5);
        var p=_checkPos(Objects.Pos-parseInt(s/(cvs2.width/2/5)*Objects.Block),Objects.Zoom);
        _setHistory("position,"+Objects.Chr+","+p+","+Objects.Zoom);
        localStorage.setItem('_Pos', p);
        _showLoading();
        _messageOnScreen("Loading position "+(p*_cvtZoom(Objects.Zoom))+" b");
        FROMSCROLL=false;
        _execCanvas();
      }
    }
  }
}

/////////////////////////////////////////////// Mouse down on cell
var XY=new Object();
var isDrag;
var pinchFlag;
function _mouseDownListner(e) {
  var rect = e.target.getBoundingClientRect();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  if(e.touches.length > 1){
    pinchFlag=true;
    return;
  }
  e.preventDefault();
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
    e.preventDefault();
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);
  // Draggin started
  if(!rightclick) isDrag=true;
}

/////////////////////////////////////////////// Mouse move on track title
function _mouseMoveTrackTitleListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  document.body.style.cursor = "default";
  // Change direction of reference
  if ( _cvtZoom(Objects.Zoom) == 1 ) {
    if ( XY.y1 > cvs0.height-15 && XY.y1 < cvs0.height ) {
      document.body.style.cursor = "pointer";
    }
  }
}

/////////////////////////////////////////////// Mouse down on track title
function _mouseOutTrackTitleListner(e) {
  document.body.style.cursor = "default";
}

/////////////////////////////////////////////// Mouse down on track title
function _mouseDownTrackTitleListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  // Change direction of reference
  if ( _cvtZoom(Objects.Zoom) == 1 ) {
    if ( XY.y1 > cvs0.height-15 && XY.y1 < cvs0.height ) {
      _changeDirRef();
      _drawCanvas();
    }
  }
}

/////////////////////////////////////////////// Mouse down on Title
var XYti=new Object();
function _mouseDownTitleListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XYti.x2=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XYti.y2=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XYti.x2=parseInt(e.clientX)-parseInt(rect.left);
    XYti.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  var rightclick;
  if(e.which) rightclick = (e.which==3);
  else if (e.button) rightclick = (e.button==2);
  if(!rightclick && XYti.x2 < cvs3.width && XYti.x2 > 0 && XYti.y2 < cvs3.height && XYti.y2 > 0 ){
    ctx3.putImageData(frameTitle, 0, 0);
    ctx4.putImageData(frameCell, 0, 0);
    document.body.style.cursor = "default";
    _dialog_changeRef(parseInt(XYti.y2/Objects.BlockH));
  }else{
    ctx3.putImageData(frameTitle, 0, 0);
    ctx4.putImageData(frameCell, 0, 0);
    document.body.style.cursor = "default";
  }
  var elementcell = document.getElementById("cellinf");
  elementcell.style.top = '1px'; 
  elementcell.style.left = '1px';
  cvs10.width=1;
  cvs10.height=1;
  ctx10.fillStyle='rgba(0,0,0,0)';
  ctx10.fillRect(0,0,cvs10.width,cvs10.height);
  _windowGffClose();
}


/////////////////////////////////////////////// Mouse move on title
function _mouseOutTitleListner(e) {
  var elementcell = document.getElementById("cellinf");
  ctx3.putImageData(frameTitle, 0, 0);
  ctx4.putImageData(frameCell, 0, 0);
  document.body.style.cursor = "default";
  elementcell.style.top = '1px'; 
  elementcell.style.left = '1px';
  cvs10.width=1;
  cvs10.height=1;
  ctx10.fillStyle='rgba(0,0,0,0)';
  ctx10.fillRect(0,0,cvs10.width,cvs10.height);
  _windowGffClose();
}

/////////////////////////////////////////////// Mouse move on title
function _mouseMoveTitleListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XYti.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XYti.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XYti.x2=parseInt(e.clientX)-parseInt(rect.left);
    XYti.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  document.body.style.cursor = "pointer";
  ctx4.putImageData(frameCell, 0, 0);
  var elementList = document.getElementById("cvs_view");
  var bounds = elementList.getBoundingClientRect(); 
  var bouy = bounds.top;
  var element = document.getElementById("cellinf"); 
  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 - parseInt(XYti.y2/Objects.BlockH)*Objects.BlockH) < 200+hidreg+Objects.BlockH){
  element.style.top = bouy-185+(parseInt((XYti.y2)/Objects.BlockH)*Objects.BlockH)+'px'; 
  }else{
  element.style.top = bouy+8+(parseInt((XYti.y2)/Objects.BlockH)*Objects.BlockH)+'px'; 
  }
  element.style.left = (Objects.titleWidth+92)+'px';
  cvs10.height = 190;
  cvs10.width=280;
  ctx10.clearRect(0, 0, cvs10.width, cvs10.height);
  ctx10.fillStyle='rgba(0,0,0,0)';
  ctx10.fillRect(0,0,cvs10.width,cvs10.height);
  if (XYti.y2 >= 0 && XYti.y2 < cvs3.height){
    _draw_detail_accession(parseInt(XYti.y2/Objects.BlockH));
    _drawTitle(parseInt(XYti.y2/Objects.BlockH));
  }
}

/////////////////////////////////////////////// Start drag during mouse down on cell
function _mouseMoveListner(e) {
  var rect = e.target.getBoundingClientRect();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {   //iPad & iPhone & Android
    XY.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
    if(pinchFlag){
      return;
    }else{
      e.preventDefault();
    }
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
    e.preventDefault();
  }
  document.body.style.cursor = "default";
  if(isDrag){
    _drawDrag("onCell");
  } else {
    ctx1.putImageData(frameTrackwR, 0, 0);
    _drawMeter(Objects.Pos,XY.x2);               // Drawing position on meter
    _drawTitle(parseInt(XY.y2/Objects.BlockH));  // Focus on title
    if(Objects.Zoom=='1b') _drawTracks(parseInt(XY.x2/Objects.BlockW)); // Focus on fasta
  }
  movetoObj=false;
  dragonObj=false;
}


//////////////////////////////////////////////// Mouse down on cell information
var isMovedCell=false;
function _mouseDownCellListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
}

function _mouseUpCellListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  if(isMovedCell==false){
    _mouseOutCellListner("");
    _dialog_infocell(ONINFOCELL.str); 
  }
  isMovedCell=false;
}

function _mouseMoveCellListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
    isMovedCell=true;
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  document.body.style.cursor = "pointer";
}

function _mouseOutCellListner(e) {
  document.body.style.cursor = "default";
  var elementcell = document.getElementById("cellinf");
  ctx1.putImageData(frameTrackwR,0,0);
  ctx3.putImageData(frameTitle,0,0);
  ctx4.putImageData(frameCell, 0, 0);
  elementcell.style.top = '1px'; 
  elementcell.style.left = '1px';
  cvs10.width=1;
  cvs10.height=1;
  ctx10.fillStyle='rgba(0,0,0,0)';
  ctx10.fillRect(0,0,cvs10.width,cvs10.height);
  isMovedCell=false;
  _windowGffClose();
}

/////////////////////////////////////////////// Zooming when double clicked on cell
function _mouseDblclickListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  _execDblClick(XY.x1);
}

/////////////////////////////////////////////// Stop drag when mouse up on cell
function _mouseOutListner(e) {
  document.body.style.cursor = "default";
  var elementcell = document.getElementById("cellinf");
  // When out in dragging
  if (isDrag && Math.abs(XY.x2-XY.x1)) {
    _getData_p(XY.x2-XY.x1);
  } else if ($('#dialog_infocell').is(":visible")) {
    // nothing for detail viewer
  } else {
    //pass
  }
  document.body.style.cursor = "default";
  isDrag=false;
  ONINFOCELL.flag=false;
}

/////////////////////////////////////////////// Popup cell info or drag
var numClicks=0;
var timeOut;
function _doClick() {  numClicks=0; }// Check double click
function _mouseUpListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
    if(pinchFlag==true){
      pinchFlag=false;
      return;
    }
  }
  pinchFlag=false;
  document.body.style.cursor = "default";
  // Check double click
  numClicks++;
  if (numClicks == 2){
    clearTimeout(timeOut);
    numClicks=0;
  }
  if (numClicks == 1){
    // Detail information
    if ( !(XY.x2-XY.x1) && ( Objects.Indicator=="off" || Objects.Indicator=="on")){
      _execInfoCell(XY.x2,XY.y2);      // Single clicked
    }
    // Dragging
    if(Math.abs(XY.x2-XY.x1)) _getData_p(XY.x2-XY.x1);
    timeOut = setTimeout("_doClick()", 400);
  }
  isDrag=false;
}

////////////////////////////////////////////// Indicator

function _mouseDownIndListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  var mode = localStorage.getItem("_Mode");
  
  if ( Objects.Indicator == "on" ) {
    if ( XY.x1 > cvs7.width-145 && XY.x1 < cvs7.width-5 && XY.y1 > 1 && XY.y1 < cvs7.height - 56 ) {
      $('#ind').draggable();
    }else{
      if($("#ind").hasClass("ui-dialog-content")){
        $('#ind').draggable("destroy");
      }
    }
    if ( XY.x1 > cvs7.width-145 && XY.x1 < cvs7.width-5 && XY.y1 > cvs7.height-56 && XY.y1 < cvs7.height - 34 ) {
      _dialog_filter();
      isDrag=false;
      ONINFOCELL.flag=false;
    }
  }
}

////////////////////////////////////////////// Indicator

function _mouseMoveIndListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x2=parseInt(e.clientX)-parseInt(rect.left);
    XY.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  document.body.style.cursor = "default";
  if ( Objects.Indicator == "on" && Objects.Mode != "dp") {
    if ( XY.x2 > cvs7.width-145 && XY.x2 < cvs7.width-5 && XY.y2 > cvs7.height-56 && XY.y2 < cvs7.height - 34 ) {
      document.body.style.cursor = "pointer";
    }
  }
  if ( Objects.Indicator == "on" &&  XY.y2 < 75){
      document.body.style.cursor = "move";
  }
}

function _mouseOutDirListner(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  document.body.style.cursor = "default";
  ctx4.putImageData(frameCell, 0, 0);
  ctx7.putImageData(frameInd, 0, 0);
}

var DATAPFLAG=false;
function _mouseDownDirListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if ((isiPad || isiPhone || isAndroid)&& (e.type == "touchend")) {//iPad & iPhone & Android
    XY.x1=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  if ( Objects.Indicator == "on" ) {
    // Detecting left direction indicator
    if ( XY.x1 > 26 && XY.x1 < 39 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 && DATAPFLAG==false) {
      DATAPFLAG=true;
      _getData_p(parseInt(cvs4.width/4));
      ctx7.strokeStyle="red";
      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.fill();
      ctx7.stroke();
      isDrag=false;
      ONINFOCELL.flag=false;
    }else if ( XY.x1 > 107 && XY.x1 < 120 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 && DATAPFLAG==false) { // Detecting right direction indicator
      DATAPFLAG=true;
      _getData_p(parseInt(-cvs4.width/4));
      ctx7.strokeStyle="red";
      ctx7.lineWidth=4;
      ctx7.beginPath();
      ctx7.moveTo(113, cvs7.height-22);
      ctx7.lineTo(118, cvs7.height-17);
      ctx7.lineTo(113, cvs7.height-12);
      ctx7.closePath();
      ctx7.fill();
      ctx7.stroke();
      isDrag=false;
      ONINFOCELL.flag=false;
    }else if ( XY.x1 > 48 && XY.x1 < 68 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {// Detecting zoom in direction indicator
      ctx7.fillStyle="red";
      ctx7.fillRect(56,cvs7.height-25.5,6,18);
      ctx7.fillRect(50,cvs7.height-20,18,6);
      _changeZoomS('+');
      isDrag=false;
      ONINFOCELL.flag=false;
    }else if ( XY.x1 > 78 && XY.x1 < 98 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {// Detecting zoom out direction indicator
      ctx7.fillStyle="red";
      ctx7.fillRect(80,cvs7.height-20,18,6);
      _changeZoomS('-');
      isDrag=false;
      ONINFOCELL.flag=false;
    } else if ( XY.x1 > 1 && XY.x1 < 20 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) { // Detecting left direction indicator L
      if(ONINFOCELL.flag){
          _execInfoCell(ONINFOCELL.cx-Objects.BlockW,ONINFOCELL.cy);
      } else {
        ctx7.strokeStyle="red";
        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.fill();
        ctx7.stroke();
        _movePage('-');
      }
      isDrag=false;
      ONINFOCELL.flag=false;
    } else if ( XY.x1 > 126 && XY.x1 < 146 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) { // Detecting right direction indicator L
      if(ONINFOCELL.flag){
        _execInfoCell(ONINFOCELL.cx+Objects.BlockW,ONINFOCELL.cy);
      } else {
        ctx7.strokeStyle="red";
        ctx7.lineWidth=4;
        ctx7.beginPath();
        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();
        _movePage('+');
      }
      isDrag=false;
      ONINFOCELL.flag=false;
    } 
  }
}

function _mouseMoveDirListner(e) {
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XY.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XY.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XY.x1=parseInt(e.clientX)-parseInt(rect.left);
    XY.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  var indHeiU=0;
  var indHeiL=0;
  if ( Objects.Indicator == "on" ) {
     // Detecting left direction
    if ( XY.x1 > 26 && XY.x1 < 39 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {
      document.body.style.cursor = "pointer";
      ctx7.strokeStyle="red";
      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.fill();
      ctx7.stroke();
    }else if ( XY.x1 > 107 && XY.x1 < 120 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) { // Detecting right direction
      document.body.style.cursor = "pointer";
      ctx7.strokeStyle="red";
      ctx7.lineWidth=4;
      ctx7.beginPath();
      ctx7.moveTo(113, cvs7.height-22);
      ctx7.lineTo(118, cvs7.height-17);
      ctx7.lineTo(113, cvs7.height-12);
      ctx7.closePath();
      ctx7.fill();
      ctx7.stroke();
    }else if ( XY.x1 > 48 && XY.x1 < 68 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {// Detecting zoom in direction
      document.body.style.cursor = "pointer";
      ctx7.fillStyle="red";
      ctx7.fillRect(56,cvs7.height-25.5,6,18);
      ctx7.fillRect(50,cvs7.height-20,18,6);
      _drawMessageOnScreen("zoomIn");
    }else if ( XY.x1 > 78 && XY.x1 < 98 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) { // Detecting zoom out direction
      document.body.style.cursor = "pointer";
      ctx7.fillStyle="red";
      ctx7.fillRect(80,cvs7.height-20,18,6);
    }else if ( XY.x1 > 1 && XY.x1 < 20 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {//Detecting left direction L
      document.body.style.cursor = "pointer";
      ctx7.strokeStyle="red";
      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.fill();
      ctx7.stroke();
    }else if ( XY.x1 > 126 && XY.x1 < 146 && XY.y1 > cvs7.height-28 && XY.y1 < cvs7.height-8 ) {//Detecting right direction L
      document.body.style.cursor = "pointer";
      ctx7.strokeStyle="red";
      ctx7.lineWidth=4;
      ctx7.beginPath();
      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();
    } else{
      ctx7.putImageData(frameInd, 0, 0);
      ctx4.putImageData(frameCell, 0, 0);
    }
  }
}

var XYzm=new Object();
function _mouseMoveZoomListner(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XYzm.x2=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XYzm.y2=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XYzm.x2=parseInt(e.clientX)-parseInt(rect.left);
    XYzm.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  var pointer=0;
  var czoom="100k";
  if(frameZoomb){
    ctx9.putImageData(frameZoomb, 0, 0);
    if(XYzm.x2 >= 121 && XYzm.x2 <= 351 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
      document.body.style.cursor = "pointer";
      ctx9.fillStyle=_setColor().zoombar;
      ctx9.textAlign="left";
      ctx9.font="14px 'Century'";
      ctx9.beginPath();
      if (XYzm.x2 >= 121 && XYzm.x2 < 126) {
        pointer=124;
        ctx9.fillText("1b",pointer+10,13);
        czoom="1b";
      }else if (XYzm.x2 >= 126 && XYzm.x2 < 131){
        pointer=129;
        czoom="2b";
        ctx9.fillText("2b",pointer+10,13);
      }else if (XYzm.x2 >= 131 && XYzm.x2 < 136){
        pointer=134;
        czoom="3b";
        ctx9.fillText("3b",pointer+10,13);
      }else if (XYzm.x2 >= 136 && XYzm.x2 < 141){
        pointer=139;
        czoom="4b";
        ctx9.fillText("4b",pointer+10,13);;
      }else if (XYzm.x2 >= 141 && XYzm.x2 < 146){
        pointer=144;
        czoom="5b";
        ctx9.fillText("5b",pointer+10,13);
      }else if (XYzm.x2 >= 146 && XYzm.x2 < 151){
        pointer=149;
        czoom="6b";
        ctx9.fillText("6b",pointer+10,13);
      }else if (XYzm.x2 >= 151 && XYzm.x2 < 156){
        pointer=154;
        czoom="7b";
        ctx9.fillText("7b",pointer+10,13);
      }else if (XYzm.x2 >= 156 && XYzm.x2 < 161){
        pointer=159;
        czoom="8b";
        ctx9.fillText("8b",pointer+10,13);
      }else if (XYzm.x2 >= 161 && XYzm.x2 < 166){
        pointer=164;
        czoom="9b";
        ctx9.fillText("9b",pointer+10,13);
      }else if (XYzm.x2 >= 166 && XYzm.x2 < 171){
        pointer=169;
        czoom="10b";
        ctx9.fillText("10b",pointer+10,13);
      }else if (XYzm.x2 >= 171 && XYzm.x2 < 176){
        pointer=174;
        czoom="20b";
        ctx9.fillText("20b",pointer+10,13);
      }else if (XYzm.x2 >= 176 && XYzm.x2 < 181){
        pointer=179;
        czoom="30b";
        ctx9.fillText("30b",pointer+10,13);
      }else if (XYzm.x2 >= 181 && XYzm.x2 < 186){
        pointer=184;
        czoom="40b";
        ctx9.fillText("40b",pointer+10,13);
      }else if (XYzm.x2 >= 186 && XYzm.x2 < 191){
        pointer=189;
        czoom="50b";
        ctx9.fillText("50b",pointer+10,13);
      }else if (XYzm.x2 >= 191 && XYzm.x2 < 196){
        pointer=194;
        czoom="60b";
        ctx9.fillText("60b",pointer+10,13);
      }else if (XYzm.x2 >= 196 && XYzm.x2 < 201){
        pointer=199;
        czoom="70b";
        ctx9.fillText("70b",pointer+10,13);
      }else if (XYzm.x2 >= 201 && XYzm.x2 < 206){
        pointer=204;
        czoom="80b";
        ctx9.fillText("80b",pointer+10,13);
      }else if (XYzm.x2 >= 206 && XYzm.x2 < 211){
        pointer=209;
        czoom="90b";
        ctx9.fillText("90b",pointer+10,13);
      }else if (XYzm.x2 >= 211 && XYzm.x2 < 216){
        pointer=214;
        czoom="100b";
        ctx9.fillText("100b",pointer+10,13);
      }else if (XYzm.x2 >= 216 && XYzm.x2 < 221){
        pointer=219;
        czoom="200b";
        ctx9.fillText("200b",pointer+10,13);
      }else if (XYzm.x2 >= 221 && XYzm.x2 < 226){
        pointer=224;
        czoom="300b";
        ctx9.fillText("300b",pointer+10,13);
      }else if (XYzm.x2 >= 226 && XYzm.x2 < 231){
        pointer=229;
        czoom="400b";
        ctx9.fillText("400b",pointer+10,13);
      }else if (XYzm.x2 >= 231 && XYzm.x2 < 236){
        pointer=234;
        czoom="500b";
        ctx9.fillText("500b",pointer+10,13);
      }else if (XYzm.x2 >= 236 && XYzm.x2 < 241){
        pointer=239;
        czoom="600b";
        ctx9.fillText("600b",pointer+10,13);
      }else if (XYzm.x2 >= 241 && XYzm.x2 < 246){
        pointer=244;
        czoom="700b";
        ctx9.fillText("700b",pointer+10,13);
      }else if (XYzm.x2 >= 246 && XYzm.x2 < 251){
        pointer=249;
        czoom="800b";
        ctx9.fillText("800b",pointer+10,13);
      }else if (XYzm.x2 >= 251 && XYzm.x2 < 256){
        pointer=254;
        czoom="900b";
        ctx9.fillText("900b",pointer+10,13);
      }else if (XYzm.x2 >= 256 && XYzm.x2 < 261){
        pointer=259;
        czoom="1k";
        ctx9.fillText("1k",pointer+10,13);
      }else if (XYzm.x2 >= 261 && XYzm.x2 < 266){
        pointer=264;
        czoom="2k";
        ctx9.fillText("2k",pointer+10,13);
      }else if (XYzm.x2 >= 266 && XYzm.x2 < 271){
        pointer=269;
        czoom="3k";
        ctx9.fillText("3k",pointer+10,13);
      }else if (XYzm.x2 >= 271 && XYzm.x2 < 276){
        pointer=274;
        czoom="4k";
        ctx9.fillText("4k",pointer+10,13);
      }else if (XYzm.x2 >= 276 && XYzm.x2 < 281){
        pointer=279;
        czoom="5k";
        ctx9.fillText("5k",pointer+10,13);
      }else if (XYzm.x2 >= 281 && XYzm.x2 < 286){
        pointer=284;
        czoom="6k";
        ctx9.fillText("6k",pointer+10,13);
      }else if (XYzm.x2 >= 286 && XYzm.x2 < 291){
        pointer=289;
        czoom="7k";
        ctx9.fillText("7k",pointer+10,13);
      }else if (XYzm.x2 >= 291 && XYzm.x2 < 296){
        pointer=294;
        czoom="8k";
        ctx9.fillText("8k",pointer+10,13);
      }else if (XYzm.x2 >= 296 && XYzm.x2 < 301){
        pointer=299;
        czoom="9k";
        ctx9.fillText("9k",pointer+10,13);
      }else if (XYzm.x2 >= 301 && XYzm.x2 < 306){
        pointer=304;
        czoom="10k";
        ctx9.fillText("10k",pointer+10,13);
      }else if (XYzm.x2 >= 306 && XYzm.x2 < 311){
        pointer=309;
        czoom="20k";
        ctx9.fillText("20k",pointer+10,13);
      }else if (XYzm.x2 >= 311 && XYzm.x2 < 316){
        pointer=314;
        czoom="30k";
        ctx9.fillText("30k",pointer+10,13);
      }else if (XYzm.x2 >= 316 && XYzm.x2 < 321){
        pointer=319;
        czoom="40k";
        ctx9.fillText("40k",pointer+10,13);
      }else if (XYzm.x2 >= 321 && XYzm.x2 < 326){
        pointer=324;
        czoom="50k";
        ctx9.fillText("50k",pointer+10,13);
      }else if (XYzm.x2 >= 326 && XYzm.x2 < 331){
        pointer=329;
        czoom="60k";
        ctx9.fillText("60k",pointer+10,13);
      }else if (XYzm.x2 >= 331 && XYzm.x2 < 336){
        pointer=334;
        czoom="70k";
        ctx9.fillText("70k",pointer+10,13);
      }else if (XYzm.x2 >= 336 && XYzm.x2 < 341){
        pointer=339;
        czoom="80k";
        ctx9.fillText("80k",pointer+10,13);
      }else if (XYzm.x2 >= 341 && XYzm.x2 < 346){
        pointer=344;
        czoom="90k";
        ctx9.fillText("90k",pointer+10,13);
      }else if (XYzm.x2 >= 346 && XYzm.x2 < 352){
        pointer=349;
        czoom="100k";
        ctx9.fillText("100k",pointer+10,13);
      }
      ctx9.moveTo(pointer,3);
      ctx9.lineTo(pointer+8,3);
      ctx9.lineTo(pointer+2,11);
      ctx9.closePath();
      ctx9.fill();
      ctx9.fillStyle='rgba(255,165,0,0.6)';
      ctx9.fillRect(pointer,10,4,15);
      _drawMessageOnScreen("zoomInC",_cvtZoom(czoom),_cvtZoom(Objects.Zoom));
    } else if(XYzm.x2 >= 370 && XYzm.x2 <= 395 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
      document.body.style.cursor = "pointer";
      ctx9.fillStyle='rgba(255,165,0,1)';
      ctx9.fillRect(383,13,2,12);
      ctx9.fillRect(378,17.5,12,2);
      _drawMessageOnScreen("zoomIn");
    } else if(XYzm.x2 >= 405 && XYzm.x2 <= 430 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
      document.body.style.cursor = "pointer";
      ctx9.fillStyle='rgba(255,165,0,1)';
      ctx9.fillRect(413,17.5,12,2);
    } else{
      document.body.style.cursor = "default";
      ctx4.putImageData(frameCell, 0, 0);
    }
  }
}

function _mouseOutZoomListner(e){
  document.body.style.cursor = "default";
  ctx9.putImageData(frameZoomb, 0, 0);
  ctx4.putImageData(frameCell, 0, 0);
}

function _mouseDownZoomListner(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
  if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XYzm.x1=parseInt(e.touches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XYzm.y1=parseInt(e.touches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XYzm.x1=parseInt(e.clientX)-parseInt(rect.left);
    XYzm.y1=parseInt(e.clientY)-parseInt(rect.top);
  }
  if(XYzm.x1 >= 370 && XYzm.x1 <= 395 && XYzm.y1 >= 5 && XYzm.y1 <= 40) {
    ctx9.fillStyle='rgba(255,165,0,1)';
    ctx9.fillRect(383,13,2,12);
    ctx9.fillRect(378,17.5,12,2);
  } else if(XYzm.x1 >= 405 && XYzm.x1 <= 430 && XYzm.y1 >= 5 && XYzm.y1 <= 40) {
    ctx9.fillStyle='rgba(255,165,0,1)';
    ctx9.fillRect(413,17.5,12,2);
  }
}

function _mouseUpZoomListner(e){
  var rect = e.target.getBoundingClientRect();
  e.preventDefault();
  // Getting coordinate(pc or iOS)
  var isiPad = navigator.userAgent.match(/iPad/i) != null;
  var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
  var isAndroid = navigator.userAgent.match(/Android/i) != null;
      if (isiPad || isiPhone || isAndroid) {    //iPad & iPhone & Android
    XYzm.x2=parseInt(e.changedTouches[0].pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
    XYzm.y2=parseInt(e.changedTouches[0].pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
  } else {    //PC
    XYzm.x2=parseInt(e.clientX)-parseInt(rect.left);
    XYzm.y2=parseInt(e.clientY)-parseInt(rect.top);
  }
  if(XYzm.x2 >= 121 && XYzm.x2 <= 351 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
    if (XYzm.x2 >= 121 && XYzm.x2 < 126) {
      _changeZoom('1b')
    }else if (XYzm.x2 >= 126 && XYzm.x2 < 131){
      _changeZoom('2b')
    }else if (XYzm.x2 >= 131 && XYzm.x2 < 136){
      _changeZoom('3b')
    }else if (XYzm.x2 >= 136 && XYzm.x2 < 141){
      _changeZoom('4b')
    }else if (XYzm.x2 >= 141 && XYzm.x2 < 146){
      _changeZoom('5b')
    }else if (XYzm.x2 >= 146 && XYzm.x2 < 151){
      _changeZoom('6b')
    }else if (XYzm.x2 >= 151 && XYzm.x2 < 156){
      _changeZoom('7b')
    }else if (XYzm.x2 >= 156 && XYzm.x2 < 161){
      _changeZoom('8b')
    }else if (XYzm.x2 >= 161 && XYzm.x2 < 166){
      _changeZoom('9b')
    }else if (XYzm.x2 >= 166 && XYzm.x2 < 171){
      _changeZoom('10b')
    }else if (XYzm.x2 >= 171 && XYzm.x2 < 176){
      _changeZoom('20b')
    }else if (XYzm.x2 >= 176 && XYzm.x2 < 181){
      _changeZoom('30b')
    }else if (XYzm.x2 >= 181 && XYzm.x2 < 186){
      _changeZoom('40b')
    }else if (XYzm.x2 >= 186 && XYzm.x2 < 191){
      _changeZoom('50b')
    }else if (XYzm.x2 >= 191 && XYzm.x2 < 196){
      _changeZoom('60b')
    }else if (XYzm.x2 >= 196 && XYzm.x2 < 201){
      _changeZoom('70b')
    }else if (XYzm.x2 >= 201 && XYzm.x2 < 206){
      _changeZoom('80b')
    }else if (XYzm.x2 >= 206 && XYzm.x2 < 211){
      _changeZoom('90b')
    }else if (XYzm.x2 >= 211 && XYzm.x2 < 216){
      _changeZoom('100b')
    }else if (XYzm.x2 >= 216 && XYzm.x2 < 221){
      _changeZoom('200b')
    }else if (XYzm.x2 >= 221 && XYzm.x2 < 226){
      _changeZoom('300b')
    }else if (XYzm.x2 >= 226 && XYzm.x2 < 231){
      _changeZoom('400b')
    }else if (XYzm.x2 >= 231 && XYzm.x2 < 236){
      _changeZoom('500b')
    }else if (XYzm.x2 >= 236 && XYzm.x2 < 241){
      _changeZoom('600b')
    }else if (XYzm.x2 >= 241 && XYzm.x2 < 246){
      _changeZoom('700b')
    }else if (XYzm.x2 >= 246 && XYzm.x2 < 251){
      _changeZoom('800b')
    }else if (XYzm.x2 >= 251 && XYzm.x2 < 256){
      _changeZoom('900b')
    }else if (XYzm.x2 >= 256 && XYzm.x2 < 261){
      _changeZoom('1k')
    }else if (XYzm.x2 >= 261 && XYzm.x2 < 266){
      _changeZoom('2k')
    }else if (XYzm.x2 >= 266 && XYzm.x2 < 271){
      _changeZoom('3k')
    }else if (XYzm.x2 >= 271 && XYzm.x2 < 276){
      _changeZoom('4k')
    }else if (XYzm.x2 >= 276 && XYzm.x2 < 281){
      _changeZoom('5k')
    }else if (XYzm.x2 >= 281 && XYzm.x2 < 286){
      _changeZoom('6k')
    }else if (XYzm.x2 >= 286 && XYzm.x2 < 291){
      _changeZoom('7k')
    }else if (XYzm.x2 >= 291 && XYzm.x2 < 296){
      _changeZoom('8k')
    }else if (XYzm.x2 >= 296 && XYzm.x2 < 301){
      _changeZoom('9k')
    }else if (XYzm.x2 >= 301 && XYzm.x2 < 306){
      _changeZoom('10k')
    }else if (XYzm.x2 >= 306 && XYzm.x2 < 311){
      _changeZoom('20k')
    }else if (XYzm.x2 >= 311 && XYzm.x2 < 316){
      _changeZoom('30k')
    }else if (XYzm.x2 >= 316 && XYzm.x2 < 321){
      _changeZoom('40k')
    }else if (XYzm.x2 >= 321 && XYzm.x2 < 326){
      _changeZoom('50k')
    }else if (XYzm.x2 >= 326 && XYzm.x2 < 331){
      _changeZoom('60k')
    }else if (XYzm.x2 >= 331 && XYzm.x2 < 336){
      _changeZoom('70k')
    }else if (XYzm.x2 >= 336 && XYzm.x2 < 341){
      _changeZoom('80k')
    }else if (XYzm.x2 >= 341 && XYzm.x2 < 348){
      _changeZoom('90k')
    }else if (XYzm.x2 >= 348 && XYzm.x2 < 352){
      _changeZoom('100k')
    }
  }else if(XYzm.x2 >= 370 && XYzm.x2 <= 395 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
    _changeZoomS('+');
  }else if(XYzm.x2 >= 405 && XYzm.x2 <= 430 && XYzm.y2 >= 5 && XYzm.y2 <= 40) {
    _changeZoomS('-');
  }
}

/////////////////////////////////////////////// Event of key down
function _doKeyDown(e){
var ONDIALOG=false;
if ($('#dialog_csv').is(":visible")) ONDIALOG=true;
if ($('#dialog_fa').is(":visible")) ONDIALOG=true;
if ($('#dialog_p3').is(":visible")) ONDIALOG=true;
if ($('#dialog_go').is(":visible")) ONDIALOG=true;
if ($('#dialog_track').is(":visible")) ONDIALOG=true;
if ($('#dialog_reset').is(":visible")) ONDIALOG=true;
if ($('#dialog_chref').is(":visible")) ONDIALOG=true;
if ($('#dialog_list').is(":visible")) ONDIALOG=true;
if ($('#dialog_color_manager').is(":visible")) ONDIALOG=true;
if ($('#dialog_phy').is(":visible")) ONDIALOG=true;

if(!ONDIALOG){
  switch (e.keyCode) {
    case 32:  /* space next key */
    _movePage('+');
    break;
  case 35:  /* end key for moving tail */
    _moveEdge('e');
    break;
  case 36:  /* home key for moving head */
    _moveEdge('s');
    break;
  case 37:  /*  previus key */
    if(ONINFOCELL.flag){
      _execInfoCell(ONINFOCELL.cx-Objects.BlockW,ONINFOCELL.cy);
    } else {
      _movePage('-');
    }
    break;
  case 38:  /* Up key Zoom IN */
    if(ONINFOCELL.flag){
      _execInfoCell(ONINFOCELL.cx,ONINFOCELL.cy-Objects.BlockH);
    } else {
      var rect = e.target.getBoundingClientRect();
      e.preventDefault();
      _changeZoomS('+');
    }
    break;
  case 39:  /* next key */
    if(ONINFOCELL.flag){
      _execInfoCell(ONINFOCELL.cx+Objects.BlockW,ONINFOCELL.cy);
    } else {
      _movePage('+');
    }
    break;
  case 40:  /* Down key Zoom OUT */
    if(ONINFOCELL.flag){
      _execInfoCell(ONINFOCELL.cx,ONINFOCELL.cy+Objects.BlockH);
    } else {
      var rect = e.target.getBoundingClientRect();
      e.preventDefault();
      _changeZoomS('-');
    }
    break;
  case 65:  /* a for ALL*/
    _changeModeSW('si');
    break;
  case 67:  /* c for Custom track and Whole genome */
    _changeDepth();
    break;
  case 68:  /* d for Indicator */
    _changeIndicator();
    break;
  case 69:  /* e for Effect */
    _changeEff();
    break;
  case 70:  /* f for freq or not */
    _changeOnebase();
    break;
  case 72:  /* h for Manual(help) */
    _dialog_manual();
    break;
  case 80:  /* p for DEPTH */
    _changeMode('dp');
    break;
  case 83:  /* s for SNP */
    _changeModeSW('s');
    break;
  case 84:  /* t for view annotation id */
    _viewObjectID();
    break;
  case 73:  /* i for INDEL */
    _changeModeSW('i');
    break;
  case 78:  /* n for NULL */
    _changeNull();
    break;
  case 107:  /* '+' key Zoom IN */
    _changeZoomS('+');
    break;
  case 109:  /* '-' key Zoom OUT */
    _changeZoomS('-');
    break;
  case 192: 
    _devTest();
    break;
    }
  }else{
  //e.preventDefault();
  }
}

function _devTest(){
  //console.log("!");
  if(localStorage.getItem('_ColorCode')=="on"){
    localStorage.setItem('_ColorCode',"off");
  }else{
    localStorage.setItem('_ColorCode',"on");
  }
  _drawTitleColor();
  //_test();
  //_showLoadingEffect();
  //_zzz();
}

String.prototype.bytes = function () {
    var bytes = 0,
        i,c,
        len = this.length;
    for(i=0 ;i < len ; i++){
        c = this[i].charCodeAt(0)
        if (c <= 127){
            bytes += 1;
        } else if (c <= 2047){
            bytes += 2;
        } else {
            bytes += 3;
        }
    }
    return bytes;
};

