/*
 * 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);
	// Plot Viewr
	if(phenotypeFlg){
		cvs12.addEventListener("mousedown", _mouseDownPlotListner, false);
		cvs12.addEventListener("mousemove", _mouseMovePlotListner, false);
		cvs12.addEventListener("mouseup", _mouseUpPlotListner, false);
		cvs12.addEventListener("mouseout", _mouseOutPlotListner, false);
		cvs12.addEventListener("touchstart", _mouseDownPlotListner, false);
		cvs12.addEventListener("touchmove", _mouseMovePlotListner, false);
		cvs12.addEventListener("touchend", _mouseUpPlotListner, false);
		cvs12.addEventListener("touchcancel", _mouseUpPlotListner, false);
	
		select_phenotype.addEventListener('mousedown', _mouseDownQtlTitleListner, false);
		//switch_view.addEventListener('mousedown', _mouseDownChangeViewListner, false);
	}
/*
	if ($("#dialog_blast").is(":hidden") != true) {
		objBlast = document.getElementById("dialog_blast");
		
	}
*/
}

///////////////////////////////////////////////////////////
//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);

	if(phenotypeFlg){
		cvs12.removeEventListener("mousedown", _mouseDownPlotListner, false);
		cvs12.removeEventListener("mousemove", _mouseMovePlotListner, false);
		cvs12.removeEventListener("mouseup", _mouseUpPlotListner, false);
		cvs12.removeEventListener("mouseout", _mouseOutPlotListner, false);
		cvs12.removeEventListener("touchstart", _mouseDownPlotListner, false);
		cvs12.removeEventListener("touchmove", _mouseMovePlotListner, false);
		cvs12.removeEventListener("touchend", _mouseUpPlotListner, false);
		cvs12.removeEventListener("touchcancel", _mouseUpPlotListner, 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-15, drawWid ,13);
		ctx2.beginPath();
		ctx2.strokeStyle="blue";
		ctx2.lineWidth=1;
		ctx2.moveTo(XY.x1,cvs2.height-15);
		ctx2.lineTo(XY.x3,cvs2.height-15);
		ctx2.lineTo(XY.x3,cvs2.height-1);
		ctx2.lineTo(XY.x1,cvs2.height-1);
		ctx2.lineTo(XY.x1,cvs2.height-15);
		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;
			ctx2.textAlign="right";
			ctx2.fillStyle=_setColor().chrstringcolor;
                	ctx2.fillText(String(p)+" M",XY.x2-10,y);
		} else {
			y=20;
			ctx2.textAlign="left";
			ctx2.fillStyle=_setColor().chrstringcolor;
                	ctx2.fillText(String(p)+" M",XY.x2+10,y);
		}
		/*
		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)]){
			    if(o[i].track=="BLAST"){
          			to=Object(JSON.parse(localStorage.getItem('_Track_BLAST')));
        		    }else{
          			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 - 20 && 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 if(!rightclick && XYti.x2 < cvs3.width && XYti.x2 >= cvs3.width - 20 && XYti.y2 < cvs3.height && XYti.y2 > 0 ){
		ctx3.putImageData(frameTitle, 0, 0);
		ctx4.putImageData(frameCell, 0, 0);
		document.body.style.cursor = "default";
		_dialog_phenotype_paper(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.height = 240;
	//cvs10.width=280;
	cvs10.width=370;
	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.font="14px 'Helvetica'";
			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);
			ctx9.fillRect(384,13,6,18);
        		ctx9.fillRect(378,19,18,6);
			_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);
			ctx9.fillRect(413,19,18,6);
		} 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 _checkInput() {
        window.addEventListener("click", function(e) {
                //マウスカーソルの座標を取得
                var x = e.clientX;
                var y = e.clientY;

                //座標上の要素を取得
                var z = document.elementFromPoint(x, y);
                //テキストボックスに入力するときはキーイベントをoffに
                if(/ONDIALOG/.test(z.name)) {
                        localStorage.setItem("_checkInput","1");
                } else {
                        localStorage.setItem("_checkInput","0");
                }
        }, false);
}
/////////////////////////////////////////////// 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_blast').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 (localStorage.getItem("_checkInput") == 1) 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 71: /* g for show GWAS */
			_showGWAS();
			break;
		case 72:  /* h for Manual(help) */
			_dialog_manual();
			break;
		case 80:  /* p for DEPTH */
			_changeMode('dp');
			break;
		case 83:  /* s for SNP */
			_changeMode('s');
			break;
		case 84:  /* t for view annotation id */
			_viewObjectID();
			break;
		case 73:  /* i for INDEL */
			_changeMode('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;
};

function _mouseDownQtlTitleListner(){
	_dialog_phenotypes();
}

function _mouseDownChangeViewListner(){
	$("#cvs_plot_y_scale").toggle();
	$("#cvs_plot_view").toggle();
	$("#cvs_view").toggle();
	$("#cvs_list").toggle();
}

function _setClickPhenotypePhyloEvent(){
        $(".phenotype_phylo").unbind("click");
        $(".phenotype_phylo").click(function() {
                var phenotype = $(this).val();
                phenolist = localStorage.getItem("_Phenolist");
                phenolists = phenolist.split("|");
		var userAgent = localStorage.getItem("_UA");
		//if(userAgent.toString().indexOf("chrome") > 0) {
			var htmlstr = "<span id=\"phenoid\" style=\"color:white;\">"+phenotype+"</span>";
			var htmlphylo = "<span id=\"phyloid\">"+phenotype+"</span>";
/*
		} else {
                	var htmlstr = "<select id=\"phenoid\">";
			var htmlphylo = "<select id=\"phyloid\">";
                	for (var i=0; i<phenolists.length;i++) {
                	        phenoids=phenolists[i].split(",");
                	        phenoid=phenoids[1].replace(/\r?\n/g,"");
                	        if (phenoid == phenotype) {
                	                htmlstr += "<option class=\"phenotype_main\" value=\""+phenoid+"\" selected>"+phenoid+"</option>";
                        	        htmlphylo += "<option class=\"phenotype_phylo\" value=\""+phenoid+"\" selected>"+phenoid+"</option>";
                        	} else {
                        	        htmlstr += "<option class=\"phenotype_main\" value=\""+phenoid+"\">"+phenoid+"</option>";
                        	        htmlphylo += "<option class=\"phenotype_phylo\" value=\""+phenoid+"\">"+phenoid+"</option>";
                        	}
                	}
                	htmlstr += "</select>";
                	htmlphylo += "</select>";
		}
*/
                localStorage.setItem("htmlstr",htmlstr);
                localStorage.setItem("htmlphylo",htmlphylo);
                $("#show_phenotype").empty();
                $("#show_phenotype").append(htmlstr);
		$("#select_pheno").empty();
		$("#select_pheno").append(htmlphylo);
                localStorage.setItem("_Phenotype", phenotype);
                Objects.Phenotype = phenotype;
                _getPheno(phenotype);
	        var l=new Object(JSON.parse(localStorage.getItem('_Lists')));
	        var d=new Object(JSON.parse(localStorage.getItem('_ListsDeleted')));
	        var ls="";
	        var ld="";
	        var ss="";
        	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<l.length;i++){
                	if ( Objects.Name == "id" ) {
                	        ss=l[i].id
                	} else {
                	        ss=l[i].name
                        	if (ss.length > 15) {
                                	ss = ss.substr(0,14) + "~";
                        	}                	
			}
                	var st = $.format("%1$-16s %2$-16s %3$-16s %4$-16s", ss.replace(/^\s+|\s+$/g, ""), l[i].variety.replace(/^\s+|\s+$/g, ""), l[i].grp.replace(/^\s+|\s+$/g, ""), phenohash[l[i].id].replace(/^\s+|\s+$/g, "")).replace(/\s/g,"&nbsp;");
                	//var st = $.format("%s %s %s %s", ss, l[i].variety, l[i].grp, l[i].pheno).replace(/\s/g,"&nbsp;");
                	ls=ls+"<option value='"+l[i].id+"|"+ss.replace(/^\s+|\s+$/g, "")+"|"+l[i].variety.replace(/^\s+|\s+$/g, "")+"|"+l[i].grp.replace(/^\s+|\s+$/g, "")+"|"+phenohash[l[i].id].replace(/^\s+|\s+$/g, "")+"'>"+st+"</option>";
        	}
		for (var i=0;i<d.length;i++){
                	if ( Objects.Name == "id" ) {
                        	ld=ld+"<option value='"+d[i].id+"'>"+d[i].id+"</option>";
                	} else {
                        	ld=ld+"<option value='"+d[i].id+"'>"+d[i].name+"</option>";
                	}
        	}
        	$('#idlst').find('option').remove().end().append(ls);
        	$('#lstBox1').find('option').remove().end().append(ls);
        	$('#tree_qry').find('option').remove().end().append(ld);
        	$('#lstBox2').find('option').remove().end().append(ld);
		
                _drawTitle(null);
                frameTitle=ctx3.getImageData(0, 0, cvs3.width, cvs3.height);
                var phenotype_png_name = phenotype.replace(/\s+/g, "_");
                $("#plot_img").attr("src", "images/plot/plot_" + phenotype_png_name + ".png");
                _drawPlot();
                //framePlot = ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
        });
}

function _setClickPhenotypeMainEvent(){
        $(".phenotype_main").unbind("click");
        $(".phenotype_main").click(function() {
                var phenotype = $(this).val();
                phenolist = localStorage.getItem("_Phenolist");
                phenolists = phenolist.split("|");
                var htmlstr = "<select id=\"phenoid\">";
                for (var i=0; i<phenolists.length;i++) {
                        phenoids=phenolists[i].split(",");
                        phenoid=phenoids[1].replace(/\r?\n/g,"");
                        if (phenoid == phenotype) {
                                htmlstr += "<option class=\"phenotype_main\" value=\""+phenoid+"\" selected>"+phenoid+"</option>";
                        } else {
                                htmlstr += "<option class=\"phenotype_main\" value=\""+phenoid+"\">"+phenoid+"</option>";
                        }
                }
                htmlstr += "</select>";
                localStorage.setItem("htmlstr",htmlstr);
                $("#show_phenotype").empty();
                $("#show_phenotype").append(htmlstr);
                localStorage.setItem("_Phenotype", phenotype);
                Objects.Phenotype = phenotype;
                _getPheno(phenotype);
		
                _drawTitle(null);
                frameTitle=ctx3.getImageData(0, 0, cvs3.width, cvs3.height);
                var phenotype_png_name = phenotype.replace(/\s+/g, "_");
                $("#plot_img").attr("src", "images/plot/plot_" + phenotype_png_name + ".png");
                _drawPlot();
		_setClickPhenotypeMainEvent();
                //framePlot = ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
        });
}


function _setClickPhenotypeRadioEvent(){
	$(".phenotype_radio").unbind("click");
	$(".phenotype_radio").click(function() {
		var phenotype = $(this).val();
          	phenolist = localStorage.getItem("_Phenolist");
          	phenolists = phenolist.split("|");
                var userAgent = localStorage.getItem("_UA");
                var htmlstr = "<span id=\"phenoid\" style=\"color:white;\">"+phenotype+"</span>";
                var htmlphylo = "<span id=\"phyloid\">"+phenotype+"</span>";
		localStorage.setItem("_Phenotype", phenotype);
		Objects.Phenotype = phenotype;
		_getPheno(phenotype);

		if($('#snpeff_checkbox').prop('checked')){
			make_phenotype_gene_eff_table(phenotype,localStorage.getItem("_Sort"));
			//$("#dialog_phenotypes").dialog("option", "width", 895);
		}else{
			make_phenotype_gene_table(phenotype,localStorage.getItem("_Sort"));
			//$("#dialog_phenotypes").dialog("option", "width", 800);
		}

		_drawTitle(null);
		frameTitle=ctx3.getImageData(0, 0, cvs3.width, cvs3.height);
		var phenotype_png_name = phenotype.replace(/\s+/g, "_");
		$("#plot_img").attr("src", "images/plot/plot_" + phenotype_png_name + ".png");
		if(localStorage.getItem("_GWAS") == "off") {
			//var phenoname = phenotype;
                       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 'Century'";
                        ctx14.textAlign="right";
                        ctx14.beginPath();
                        ctx14.fillText(phenoname,cvs14.width-20, 14);
		}
		_execCanvas();
		framePlot = ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
		_drawRulesforPlot();
		if ($("#dialog_phy").is(":hidden") != true) {
			_dialog_phy();
                	var hidePhylo = localStorage.getItem("_hidePhylo");
                	if (hidePhylo != null) {
				hidePhylo = $('#lstBox2').html() + hidePhylo;
                	        $('#tree_qry').find('option').remove().end().append(hidePhylo);
				var hideval = $(".hideqry").map(function() {
                                	return $(this).val();
                        	});
				var valstr = "";
                                var hidePhyArr = hidePhylo.split("</option>");
				for (var i=0; i<hideval.length; i++) {
					var valarr = hideval[i].split("|");
					var nowId = valarr[0];
					if (valstr == "") {
						valstr = nowId;
					} else if (valstr.indexOf(nowId) == -1) {
						valstr += ","+nowId;
					}
				}
				var hideIdArr = valstr.split(",");
				var hidePhyArr = hidePhylo.split("</option>");
				var hideStr = "";
				for (var i=0; i<hidePhyArr.length;i++) {
					for (var j=0; j<hideIdArr.length;j++) {
						//console.log(hidePhyArr[i]+":"+hideIdArr[j]);
						if (hidePhyArr[i].indexOf(hideIdArr[j]) != -1 && hideStr.indexOf(hideIdArr[j]) == -1) {
							if (hideStr == "") {
								hideStr = hidePhyArr[i];
							} else {
								hideStr = hideStr+","+hidePhyArr[i];
							}
						}
					}
				}
				var hideArr = hideStr.split(",");
				var hideStr = hideArr.join("</option>");
				hideStr = hideStr + "</option>";
				$('#tree_qry').find('option').remove().end().append(hideStr);
				
				console.log(hideval);
				var usePhylo = localStorage.getItem("_usePhylo");
				var usePhyArr = usePhylo.split("</option>");
				var hidePhyArr = new Array();
				for(var i=0;i<usePhyArr.length;i++) {
					for (var j=0; j<hideval.length; j++) {
						var valarr = hideval[j].split("|");
						if ( usePhyArr[i].match(valarr[0])) {
							//console.log(valarr[1]);
							usePhyArr[i] = "";
						}
					}
				}
				//console.log(hidePhyArr);
				usePhylo = usePhyArr.join("</option>");
				$('#idlst').find('option').remove().end().append(usePhylo);
                	}
		}
	});
}

function _setClickSnpEffCheckboxEvent(){
	$('#snpeff_checkbox').unbind('click');
	$('#snpeff_checkbox').prop('checked', false);
	$('#snpeff_checkbox').on('change', function(){
		var phenotype = $('.phenotype_radio:checked').val();
		if($('#snpeff_checkbox').prop('checked')){
			make_phenotype_gene_eff_table(phenotype);
			$("#dialog_phenotypes").dialog("option", "width", 895);
			$('.effgrp_checkbox').prop('disabled', false);
		}else{
			make_phenotype_gene_table(phenotype);
			$("#dialog_phenotypes").dialog("option", "width", 650);
			$('.effgrp_checkbox').prop('disabled', true);
		}
	});
}

/*
function _setClickEffGrpCheckboxEvent(){
	$('.effgrp_checkbox').unbind('click');
	$('.effgrp_checkbox').on('change', function(){
		var phenotype = $('.phenotype_radio:checked').val();
		//if($('#snpeff_checkbox').prop('checked')){
			//make_phenotype_gene_eff_table(phenotype);
			make_phenotype_gene_table(phenotype);
			//$("#dialog_phenotypes").dialog("option", "width", 895);
		//}
	});
}
*/
function _filterEffGrpEvent(){
        $('#filterbtn').unbind('click');
        $('#filterbtn').on('click', function(){
                var phenotype = $('.phenotype_radio:checked').val();
                make_phenotype_gene_table(phenotype,localStorage.getItem("_Sort"));
        });
}
function _setClickCloseEvent(){
        $('.close').click(function(){
		_setClickPhenotypeMainEvent();
        });
/*
        $('.minimize').click(function(){
                _setClickPhenotypeMainEvent();
        });
*/
	$('.ui-dialog-titlebar-close').click(function(){
                _setClickPhenotypeMainEvent();
        });
}
/////////////////////////////////////////////// Mouse down on plot
function _mouseDownPlotListner(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;
}

/////////////////////////////////////////////// Start drag during mouse down on plot
function _mouseMovePlotListner(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("onPlot");
	} else {
		ctx12.putImageData(framePlot, 0, 0);
		if(Objects.Zoom=='1b') _drawTracks(parseInt(XY.x2/Objects.BlockW)); // Focus on fasta
	}
	_drawMeter(Objects.Pos,XY.x2);
	movetoObj=false;
	dragonObj=false;
}

/////////////////////////////////////////////// Stop drag when mouse up on plot
function _mouseOutPlotListner(e) {
	document.body.style.cursor = "default";
	// When out in dragging
	if (isDrag && Math.abs(XY.x2-XY.x1)) {
		_getData_p(XY.x2-XY.x1);
	}
	document.body.style.cursor = "default";
	isDrag=false;
}

function _mouseUpPlotListner(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){
		// Dragging
		if(Math.abs(XY.x2-XY.x1)) _getData_p(XY.x2-XY.x1);
		timeOut = setTimeout("_doClick()", 400);
	}
	isDrag=false;
}

///resize dialog function///
/*
$(window).on('load resize', function() {
		$(".ui-dialog").css('max-height',window.innerHeight+40);
                $('#dialog_list').css('max-height',window.innerHeight-80);
                //$('#dialog_list').css('height',window.innerHeight-80);
                $('#dialog_phenotypes').css('max-height',window.innerHeight-80);
                //$('#dialog_phenotypes').css('height',window.innerHeight-80);
                $('#dialog_p3').css('max-height',window.innerHeight);
                //$('#dialog_p3').css('height',window.innerHeight);
                $('#dialog_phy').css('max-height',window.innerHeight);
                //$('#dialog_phy').css('height',window.innerHeight);
                $('#dialog_blast').css('max-height',window.innerHeight);
                //$('#dialog_blast').css('height',window.innerHeight);
                $('#dialog_color_manager').css('max-height',window.innerHeight-80);
                //$('#dialog_color_manager').css('height',window.innerHeight);
                $('#content').css('min-width','');
                //$('#content').css('max-width',window.innerWidth - 38);
		if(window.innerHeight > 459) {
                	$('#dialog_color_manager').css('height',460);
		}
});
*/
///Sort By Position or Probability///
function changeSort() {
	if (document.getElementById("Position").checked === true) {
		var select_phenotype=localStorage.getItem("_Phenotype");
		make_phenotype_gene_table(select_phenotype,"Position");
		localStorage.setItem("_Sort","Position");
	} else if (document.getElementById("Probability").checked === true) {
                var select_phenotype=localStorage.getItem("_Phenotype");
                make_phenotype_gene_table(select_phenotype,"Probability");
		localStorage.setItem("_Sort","Probability");
	}
}
