/*
 * event.js
 * http://tasuke.dna.affrc.go.jp/
 *
 * Author: Jungsok Kim, Ryutaro Itoh
 *
 * Copyright (c) 2013 National Institute of Agrobiological Sciences   
 *
 */

///////////////////////////////////////////////////////////
//Mouse&Touch events on
///////////////////////////////////////////////////////////
var flgSetEvents = false;
function _initEvents() {
//	var usePreventDefaultOption = {capture:false, once:false, passive:false};	// This option can not use for IE11 addEventListener.

	if(flgSetEvents) return;
	flgSetEvents = true;
	if(DEBUG_MODE) console.log("addEvents");

	//Main viewer
	document.getElementById("searchTrk").addEventListener("focus", _forcusSearchTrk, false);
	document.getElementById("searchTrk").addEventListener("blur", _blurSearchTrk, false);
	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);	// It may not be removed, but the same listener will not be registered more than once 
	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);
	// GFF title+track: track = document.getElementById("track")
	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("mousemove", _mouseMoveIndListner, false);
	cvs7.addEventListener("mouseup", _mouseUpIndListner, false);
	cvs7.addEventListener("touchstart", _mouseDownIndListner, false);
	cvs7.addEventListener("touchmove",  _mouseMoveIndListner, false);	// 20210518 add
	cvs7.addEventListener("touchend", _mouseUpIndListner, false);		// 20210518 add

	cvs7.addEventListener("mousedown", _mouseDownDirListner, false);
	cvs7.addEventListener("mousemove", _mouseMoveDirListner, false);
	cvs7.addEventListener("mouseout", _mouseOutDirListner, false);
	cvs7.addEventListener("touchstart", _mouseDownDirListner, false);
	cvs7.addEventListener("touchmove", _mouseMoveDirListner, false);
	cvs7.addEventListener("touchout", _mouseOutDirListner, false);
/*
	cvs7.addEventListener("mousedown", _mouseDownIndListner, false);
	cvs7.addEventListener("touchstart", _mouseDownIndListner, false);
	cvs7.addEventListener("mousemove", _mouseMoveIndListner, false);
	cvs7.addEventListener("mousedown", _mouseDownDirListner, false);
	cvs7.addEventListener("touchstart", _mouseDownDirListner, false);
	cvs7.addEventListener("mousemove", _mouseMoveDirListner, false);
	cvs7.addEventListener("touchmove", _mouseMoveDirListner, false);
	cvs7.addEventListener("mouseout", _mouseOutDirListner, false);
	cvs7.addEventListener("touchout", _mouseOutDirListner, false);
	cvs7.addEventListener("mouseup", _mouseUpIndListner, false);
//	cvs7.addEventListener("touchend", _mouseUpIndListner, 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);
	//SNP density
	cvs6.addEventListener("mousemove", _mouseMoveSnpDensityListner, false);
	cvs6.addEventListener("touchmove", _mouseMoveSnpDensityListner, false);
	cvs6.addEventListener("mouseout", _mouseOutSnpDensityListner, false);

	// Plot Viewr
	if(phenotypeFlg){
		// GWAS title+track: GWAS_plot = document.getElementById("GWAS_plot")
		GWAS_plot.addEventListener("mouseenter", _mouseOutCellListner, false);
		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(treeobj != null) {
		treeobj.cvs.addEventListener("mousemove", _mouseMoveSysTreeListner, false);
		treeobj.cvs.addEventListener("mousedown", _mouseDownSysTreeListner, false);
		treeobj.cvs.addEventListener("mouseout", _mouseOutSysTreeListner, false);
		treeobj.cvs.addEventListener("touchmove", _mouseMoveSysTreeListner, false);
		treeobj.cvs.addEventListener("touchstart", _mouseDownSysTreeListner, false);
		treeobj.cvs.addEventListener("touchcancel", _mouseOutSysTreeListner, false);
	}

	// SystemTree footer
	document.getElementById("cvs_tree_footer").addEventListener("mousemove", _mouseMoveTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").addEventListener("mousedown", _mouseDownTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").addEventListener("mouseout", _mouseOutTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").addEventListener("touchstart", _mouseDownTreeFooterListner, false);
}

///////////////////////////////////////////////////////////
//Mouse&Touch events on
///////////////////////////////////////////////////////////
function _removeEvents(opt) {
	flgSetEvents = false;
	if(DEBUG_MODE) console.log("removeEvents");

	document.getElementById("searchTrk").removeEventListener("focus", _forcusSearchTrk, false);
	document.getElementById("searchTrk").removeEventListener("blur", _blurSearchTrk, false);
	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);
	if(!opt || !opt["leaveScrollListener"]) content.removeEventListener("scroll", _mouseScrollListener, true);	// Do not remove to allow multiple firings
	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("mouseup", _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("mousemove", _mouseMoveIndListner, false);
	cvs7.removeEventListener("mouseup", _mouseUpIndListner, false);
	cvs7.removeEventListener("touchstart", _mouseDownIndListner, false);
	cvs7.removeEventListener("touchmove",  _mouseMoveIndListner, false);       // 20210518 add
	cvs7.removeEventListener("touchend", _mouseUpIndListner, false);           // 20210518 add

	cvs7.removeEventListener("mousedown", _mouseDownDirListner, false);
	cvs7.removeEventListener("mousemove", _mouseMoveDirListner, false);
	cvs7.removeEventListener("mouseout", _mouseOutDirListner, false);
	cvs7.removeEventListener("touchstart", _mouseDownDirListner, false);
	cvs7.removeEventListener("touchmove", _mouseMoveDirListner, false);
	cvs7.removeEventListener("touchout", _mouseOutDirListner, 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);
	cvs7.removeEventListener("mouseup", _mouseUpIndListner, 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);

	cvs6.removeEventListener("mousemove", _mouseMoveSnpDensityListner, false);
	cvs6.removeEventListener("touchmove", _mouseMoveSnpDensityListner, false);
	cvs6.removeEventListener("mouseout", _mouseOutSnpDensityListner, false);

	if(phenotypeFlg){
		GWAS_plot.removeEventListener("mouseenter", _mouseOutCellListner, false);
		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);
	}
	if(treeobj != null) {
                treeobj.cvs.removeEventListener("mousemove", _mouseMoveSysTreeListner, false);
		treeobj.cvs.removeEventListener("mousedown", _mouseDownSysTreeListner, false);
		treeobj.cvs.removeEventListener("mouseout", _mouseOutSysTreeListner, false);
		treeobj.cvs.addEventListener("touchmove", _mouseMoveSysTreeListner, false);
		treeobj.cvs.addEventListener("touchstart", _mouseDownSysTreeListner, false);
		treeobj.cvs.addEventListener("touchcancel", _mouseOutSysTreeListner, false);
        }

	// SystemTree footer
	document.getElementById("cvs_tree_footer").removeEventListener("mousemove", _mouseMoveTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").removeEventListener("mousedown", _mouseDownTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").removeEventListener("mouseout", _mouseOutTreeFooterListner, false);
	document.getElementById("cvs_tree_footer").removeEventListener("touchstart", _mouseDownTreeFooterListner, false);
}
function isSetEvents() {
	return flgSetEvents;
}

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 SCRTIMER_CACHE = null;
function _mouseScrollListener(e){
	drawTrackFromScroll();
}
function drawTrackFromScroll() {
	var visibleArea = getContentVisibleArea();
	var skipTop = visibleArea.top;
	var visibleCont = visibleArea.count;
//	VIEWSTART=skipTop;
//	VIEWLEN=visibleCont;

	var loadDbs = [];
	var array = _NgetList("db", skipTop, visibleCont+1);
	for(var i=0,len=array.length; i < len; i++){
		if(!isValidTrackRow(array[i])) loadDbs.push(array[i]);
	}
	if(SCRTIMER){clearTimeout(SCRTIMER);}
	if(loadDbs.length > 0){
		storage.setItem("_ListsTgt", loadDbs.join(','));
		SCRTIMER = setTimeout(function(){
//console.log("do _execCanvas in _mouseScrollListener()");
			_showLoading({"leaveScrollListener":true});
			FROMSCROLL=true;
			_execCanvas();
			SCRTIMER = null;
		}, 200);	// <- 300	@20210424
	}
/*
	else {
		if(SCRTIMER_CACHE) clearTimeout(SCRTIMER_CACHE);
		SCRTIMER_CACHE = setTimeout(function(){
			cacheViewportImageData();
			SCRTIMER_CACHE = null;
		}, 40);
	}
*/
	return;
}

function _mouseOutDivTrackListener(e){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x3 = cursorXY.x;
	XY.y3 = cursorXY.y;
/*
	var rect = e.target.getBoundingClientRect();
	e.preventDefault();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x3 = cursorXY.x;
	XY.y3 = cursorXY.y;
/*
	var rect = e.target.getBoundingClientRect();
	e.preventDefault();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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
	}
/*
	var drawCursorLines = false;
	if(storage.getItem("_CursorLines") === "on") drawCursorLines = true;
	if(drawCursorLines) {
		if(XY.y3 >= 40 && XY.y3 <= cvs2.height) {
			_drawCursorLines(e, XY.x3, XY.y3, true);
		} else {
			_clearCursorLines(e);
		}
	} 
*/
}

function _mouseDropTrackListener(e){
//	e.preventDefault();	// Doing this here will prevent Chr select pull-down.
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x3 = cursorXY.x;
	XY.y3 = cursorXY.y;
/*
	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) {
//		e.preventDefault();
		var x1 = XY.x1/cvs2.width;
		var x3 = XY.x3/cvs2.width;
		var posA = parseInt((storage.getItem('_Pos')-1)*_cvtZoom(Objects.Zoom)+(Objects.Block*x1)*_cvtZoom(Objects.Zoom));
		var posB= parseInt((storage.getItem('_Pos')-1)*_cvtZoom(Objects.Zoom)+(Objects.Block*x3)*_cvtZoom(Objects.Zoom));
		if(posA <= posB){
			_execSearch(DAMMY_KEYWORD + "|" + posA + "|" + posB + "|" + Objects.Chr + "|", true);
//			_execSearch("the target|"+posA+"|"+posB+"|"+Objects.Chr+"|", true);
		}else{
			_execSearch(DAMMY_KEYWORD + "|" + posB + "|" + posA + "|" + Objects.Chr + "|", true);
//			_execSearch("the target|"+posB+"|"+posA+"|"+Objects.Chr+"|", true);
		}
	}else{
		_drawTOP();
	}
	movetoObj=false;
	dragonObj=false;
	document.body.style.cursor = "default";
}

/////////////////////////////////////////////// Mouse moving on Navigation
function _mouseMoveNavListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x2 = cursorXY.x;
	XY.y2 = cursorXY.y;
/*
	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";
	}

	var drawCursorLines = false;
	if(storage.getItem("_CursorLines") === "on") drawCursorLines = true;
	if(drawCursorLines) {
		if(XY.y2 >= 40) {
			_drawCursorLines(e, XY.x2, XY.y2, true);
		} else {
			_clearCursorLines(e);
		}
	}

}

/////////////////////////////////////////////// Mouse down on Track
function _mouseDownTrackListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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(storage.getItem("_Env")));
		storage.setItem('_Keyword', IDo.id); 

		updateObjects();	// Reflect the clicked gene to Objects.
		_drawTracks();
//		_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);
		_createGffWindow(IDo.id, IDo.pos, end, IDo.seq);
		isDrag=false;
	} else if (!rightclick) {
		isDrag=true;
	}
}
function _getTrackLink(env, ido, others) {
	var link = "";
	if(ido.track != null) {
		var tracks = new Object(JSON.parse(storage.getItem('_Tracks')));
		var trackName = tracks[ido.track].track;
		var linkId = ido.ln;
		if(env['external_link_tag_gff'] && env['external_link_tag_gff'] in others) linkId = others[env['external_link_tag_gff']];
		if(env['external_sites'] && (typeof env['external_sites'])=='object' && Object.keys(env['external_sites']).length>0) {
			var trackMap = env['external_sites'];
			if(trackMap[trackName] && trackMap[trackName].link) {
				link = _makeLinkUrl(trackMap[trackName].link, trackMap[trackName].suffix, linkId);
			}
		} else if(env.external_link) {
			link = _makeLinkUrl(env.external_link, env.external_link_suffix, linkId);
		}
	}
	return link;
}
function _makeLinkUrl(link, suffix, id) {
	var url = link + id + suffix;
	return _escapeHTML(url);
}

function _zoomFromGffWindow(str){
	_execSearch(str, true);
	_windowGffClose();
}
function _highlightGeneVariant(targetPos){
	var target=targetPos.split("|");
	storage.setItem("_HighlightVariantGene", target[0]);
	setRegionHighlight({"chr":target[3], "st":target[1], "en":target[2]});	// Region Highlight
	if(target[0] && $('#cb_hlvar_exclude_updown').prop('checked')) {
		storage.setItem("_HighlightVariantExclUpDown", "1");
	} else {
		storage.setItem("_HighlightVariantExclUpDown", "");
	}
	_windowGffClose();

	_reloadCanvas("Highlight variant : " + target[0]);
//	FROMSCROLL=false;
//	_execCanvas();
}

/////////////////////////////////////////////// touch start on Track
function _touchStartTrackListner(e) {
	var rowHeight=40;
	var trackVirwMode=storage.getItem("_TrackID");
	if(trackVirwMode=="on"){rowHeight=80;}
	var eachRowHeight=rowHeight/4;

	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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="";
//        IDo.others = ""; 
	IDo.seq = "";
	IDo.track = "";

	if (_cvtZoom(Objects.Zoom)<5000){
		var to=new Object();
		var o=new Object(JSON.parse(storage.getItem('_Tracks')));
		document.body.style.cursor = "default";
		var th=0;
		var trackIndex = null;
		for (i=0;i<o.length;i++){
			if(o[i].track==Objects.Tracks[parseInt(XY.y1/rowHeight)]){
			    trackIndex = i;
			    if(o[i].track=="Blast Result"){
				to = _getGffTrackMap('_Track_blst');
//          			to=Object(JSON.parse(storage.getItem('_Track_BLAST')));
        		    }else{
				to = _getGffTrackMap('_Track_' + i);
//          			to=Object(JSON.parse(storage.getItem('_Track_'+i)));
        		    }
			    th=parseInt(o[i].h);
			    break;
			}
		}
		for(j=0,toLen=to.length; j<toLen; 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);
//                                IDo.others=_escapeHTML(to[j].os); 
				IDo.seq = _escapeHTML(to[j].sq);
				IDo.track = trackIndex;
				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(storage.getItem("_Env")));
		//_setHistory("search,"+IDo.id);
		storage.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";
	}

	if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
	
}

/////////////////////////////////////////////// Mouse up from Track
function _mouseUpNavListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x2 = cursorXY.x;
	XY.y2 = cursorXY.y;
/*
	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();
		if(frameCell != null) ctx4.putImageData(frameCell, 0, 0);	// clear 1base highlight
//		if(frameCellViewport['data']) ctx4.putImageData(frameCellViewport['data'], 0, frameCellViewport['y']);	// clear 1base highlight
		if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
	}
}

/////////////////////////////////////////////// Mouse moving on Track
var IDo=new Object();
var flgResetGffTrackCvs = false;
var flgResetVariantCvs = false;
function _mouseMoveTrackListner(e) {
	var rowHeight=40;
	var trackVirwMode=storage.getItem("_TrackID");
	if(trackVirwMode=="on"){rowHeight=80;}
	var eachRowHeight=rowHeight/4;

	var rect = e.target.getBoundingClientRect();
	e.preventDefault();

	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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="";
//                IDo.others=""; 
		IDo.seq="";
		IDo.track = "";
		if(flgResetGffTrackCvs) {
			ctx1.putImageData(frameTrackwR, 0, 0);
		}

		var drawCursorLines = false;
		if(storage.getItem("_CursorLines") === "on") drawCursorLines = true;
		if(drawCursorLines) _clearCursorLines(e);

		// Focus red area under gene when 1b
		if(flgResetVariantCvs) {
			// Update VariantTrack highlight with mousemove over a base when BlockSize=1b.
			if(frameCell) ctx4.putImageData(frameCell, 0, 0);
//			if(frameCellViewport['data']) ctx4.putImageData(frameCellViewport['data'], 0, frameCellViewport['y']);
		}
		if (_cvtZoom(Objects.Zoom)<5000){
			if ( _cvtZoom(Objects.Zoom) == 1 && XY.y2 > cvs1.height-15 && XY.y2 < cvs1.height ) {
				// on NT/AA track
				flgResetVariantCvs = true;
				var pos=parseInt(XY.x2/Objects.BlockW);
				ctx4.fillStyle="rgba(220,0,0,0.1)";
				ctx4.lineWidth=1;
				
				var blockH = parseInt(storage.getItem("_BlockH"));
				var visArea = getContentVisibleArea();
				var visAreaY = (visArea['top'] - 1) * blockH;
				var visAreaH = visArea['count'] * blockH;
				ctx4.fillRect(pos*Objects.BlockW, visAreaY, Objects.BlockW, visAreaH);
//				ctx4.fillRect(pos*Objects.BlockW,0,Objects.BlockW,cvs4.height);
				_drawTracks(pos);

				drawCursorLines = false;
			} else {
				flgResetVariantCvs = false;
				var to=new Object();
				var o=new Object(JSON.parse(storage.getItem('_Tracks')));
				document.body.style.cursor = "default";
				var th=0;
				var trackIndex = null;
				for(var i=0, oLen=o.length; i<oLen; i++) {
					if(o[i].track==Objects.Tracks[parseInt(XY.y2/rowHeight)]){
						trackIndex = i;
						to = _getGffTrackMap('_Track_' + i);
						th=parseInt(o[i].h);
						break;
					}
				}
				for(var j=0, tolen=to.length; j<tolen; 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);
							flgResetGffTrackCvs = true;
						}

						// 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);
//						IDo.others=_escapeHTML(to[j].os);
						IDo.seq=_escapeHTML(to[j].sq);
						IDo.track = trackIndex;
						break;
					}
				}
			}
		} else {
			flgResetGffTrackCvs = false;
			flgResetVariantCvs = false;
		}
		if(drawCursorLines) _drawCursorLines(e, XY.x2, XY.y2, true);
		_drawMeter(Objects.Pos,XY.x2);
	}
}

/////////////////////////////////////////////// Mouse down on Navigation
var movetoObj=false;
var dragonObj=false;
function _mouseDownNavListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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);
			storage.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);
				storage.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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x2 = cursorXY.x;
	XY.y2 = cursorXY.y;
/*
	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);
			storage.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);
				storage.setItem('_Pos', p);
				_showLoading();
				_messageOnScreen("Loading position "+(p*_cvtZoom(Objects.Zoom))+" b");
				FROMSCROLL=false;
				_execCanvas();
			}
		}
	}
}

/////////////////////////////////////////////// Mouse down on cell
var XY=new Object();	// for Track dragging
var isDrag;
var pinchFlag = false;	// for SmartPhone. Pinch action(using two fingers) flag.
function _mouseDownListner(e) {
	var rect = e.target.getBoundingClientRect();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;

	// Change direction of reference
	if ( _cvtZoom(Objects.Zoom) == 1 ) {
		if ( cursorXY.y > cvs0.height-15 && cursorXY.y < cvs0.height ) {
			_changeDirRef();
			_drawCanvas();
		}
	}
/*
	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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XYti.x2 = cursorXY.x;
	XYti.y2 = cursorXY.y;
/*
	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 ){
	if(!rightclick && XYti.x2 < cvs3.width && XYti.x2 > 0 && XYti.y2 < cvs3.height && XYti.y2 > 0 ){
		ctx3.putImageData(frameTitle, 0, 0);
		ctx4.putImageData(frameCell, 0, 0);
		document.body.style.cursor = "default";
		_dialog_changeRef(parseInt(XYti.y2/Objects.BlockH));
//	}else 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) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XYti.x2 = cursorXY.x;
	XYti.y2 = cursorXY.y;
/*
	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'; 
	}
	var systreeCanvas = document.getElementById("cvs_tree");
	element.style.left = String(Objects.titleWidth + systreeCanvas.width + 92) + 'px';
//	element.style.left = (Objects.titleWidth+92)+'px';
	cvs10.height = 240;
	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));
		if(storage.getItem("_CursorLines") === "on") _drawCursorLines(e, XYti.x2, XYti.y2);
	}
}

/////////////////////////////////////////////// Start drag during mouse down on cell
function _mouseMoveListner(e) {
	var rect = e.target.getBoundingClientRect();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {   //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

		 if(storage.getItem("_CursorLines") === "on") _drawCursorLines(e, XY.x2, XY.y2);
	}
	movetoObj=false;
	dragonObj=false;
}


////////////////////////////////////////////////Mouse down on cell information
var isMovedCell=false;
function _mouseDownCellListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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) {
	isClickCell = 1;

	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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(null);
		_dialog_infocell(ONINFOCELL.str); 
	}
	isMovedCell=false;
}

function _mouseMoveCellListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x2 = cursorXY.x;
	XY.y2 = cursorXY.y;
	if(isSmartPhone()) isMovedCell=true;
/*
	var rect = e.target.getBoundingClientRect();
	e.preventDefault();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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();
}

/////////////////////////////////////////////// SNP density
function _mouseMoveSnpDensityListner(e) {
	e.preventDefault();
	var xy = getMouseXY(e);
	if(xy === null) return;
	if(storage.getItem("_CursorLines") === "on") _drawCursorLines(e, xy.x, xy.y);
}
function _mouseOutSnpDensityListner(e) {
	if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
} 

/////////////////////////////////////////////// Zooming when double clicked on cell
function _mouseDblclickListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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
		if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
	} else {
		//pass
		if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
	}
	document.body.style.cursor = "default";
	isDrag=false;
	ONINFOCELL.flag=false;
}

/////////////////////////////////////////////// Popup cell info or drag
var numClicks=0;
var timeOut;
var isClickCell = 0;
function _doClick() {  numClicks=0; }// Check double click
function _mouseUpListner(e) {
	var rect = e.target.getBoundingClientRect();
	e.preventDefault();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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){
			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")){
			if (isClickCell == 0) {
				_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;
	isClickCell = 0;
}

//////////////////////////////////////////////Indicator
function _actionIndSnpEff(func, x, y) {
	var exec = false;
	for(var i=0; i<4; i++) {
		var impt = String(i);
		if(impt in indEffBoxPos && x >= indEffBoxPos[impt].x && x < indEffBoxPos[impt].x + indEffBoxPos[impt].w &&
		  y >= indEffBoxPos[impt].y && y < indEffBoxPos[impt].y + indEffBoxPos[impt].h) {
			func(i);
			exec = true;
			break;
		}
	}
	return exec;
}
var indMouseDown = false;
var indMouseMove = false;
function _mouseDownIndListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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 = storage.getItem("_Mode");

	if ( Objects.Indicator == "on" ) {
		$('#ind').draggable();
		if ( XY.x1 > cvs7.width-145 && XY.x1 < cvs7.width-5 && XY.y1 > 1 && XY.y1 < cvs7.height) {
			$('#ind').draggable("enable");
		} else {
			$('#ind').draggable("destroy");
		}
/*
		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;
		}
*/
	}
	indMouseDown = true;
	indMouseMove = false;
}

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

var DATAPFLAG=false;
function _mouseUpIndListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x3 = cursorXY.x;
	XY.y3 = cursorXY.y;
/*
        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(Objects.Indicator === "on" && indMouseDown && !indMouseMove) {
	    // Execute each event when the mouseup without moving the dialog
	    while(true) {
		if ( XY.x1 > cvs7.width-145 && XY.x1 < cvs7.width-5 && XY.y1 > cvs7.height-56 && XY.y1 < cvs7.height - 34 ) {
			// open Variant filter dialog
			_dialog_filter();
			isDrag=false;
			ONINFOCELL.flag=false;
			break;
		}

		var execDir = false;
		if ( XY.x1 > indDirBoxPos['left'].l && XY.x1 < indDirBoxPos['left'].r && XY.y1 > indDirBoxPos['left'].t && XY.y1 < indDirBoxPos['left'].b  && DATAPFLAG==false) {
			// Detecting left direction indicator
			DATAPFLAG=true;
			_getData_p(parseInt(cvs4.width/4));
			_drawDirLeft("red");
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['right'].l && XY.x1 < indDirBoxPos['right'].r && XY.y1 > indDirBoxPos['right'].t && XY.y1 < indDirBoxPos['right'].b  && DATAPFLAG==false) {
			// Detecting right direction indicator
			DATAPFLAG=true;
			_getData_p(parseInt(-cvs4.width/4));
			_drawDirRight("red");
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['zoomin'].l && XY.x1 < indDirBoxPos['zoomin'].r && XY.y1 > indDirBoxPos['zoomin'].t && XY.y1 < indDirBoxPos['zoomin'].b ) {
			// Detecting zoom in direction indicator
			_changeZoomS('+');
			_drawDirZoomIn("red");
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['zoomout'].l && XY.x1 < indDirBoxPos['zoomout'].r && XY.y1 > indDirBoxPos['zoomout'].t && XY.y1 < indDirBoxPos['zoomout'].b ) {
			// Detecting zoom out direction indicator
			_changeZoomS('-');
			_drawDirZoomOut("red");
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['leftpage'].l && XY.x1 < indDirBoxPos['leftpage'].r && XY.y1 > indDirBoxPos['leftpage'].t && XY.y1 < indDirBoxPos['leftpage'].b ) {
			// Detecting left direction indicator L
			if(ONINFOCELL.flag){
				_execInfoCell(ONINFOCELL.cx-Objects.BlockW,ONINFOCELL.cy);
			} else {
				_movePage('-');
				_drawDirLeftPage("red");
			}
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['rightpage'].l && XY.x1 < indDirBoxPos['rightpage'].r && XY.y1 > indDirBoxPos['rightpage'].t && XY.y1 < indDirBoxPos['rightpage'].b ) {
			// Detecting right direction indicator L
			if(ONINFOCELL.flag){
				_execInfoCell(ONINFOCELL.cx+Objects.BlockW,ONINFOCELL.cy);
			} else {
				_movePage('+');
				_drawDirRightPage("red");
			}
			execDir = true;
		} else if ( XY.x1 > indDirBoxPos['clear'].l && XY.x1 < indDirBoxPos['clear'].r && XY.y1 > indDirBoxPos['clear'].t && XY.y1 < indDirBoxPos['clear'].b ) {
			//Detecting clear highlight
			if(ONINFOCELL.flag){
				_execInfoCell(ONINFOCELL.cx+Objects.BlockW,ONINFOCELL.cy);
			} else {
				_dialog_clearHighlight();
				_drawDirClearHighlight("#aaaaaa", "red");
			}
		}

		if(execDir) {
			isDrag=false;
			ONINFOCELL.flag=false;
			break;
		}

                if(storage.getItem("_Eff") === 'on' && storage.getItem("_EffGrps")) {
                        // toggle SnpEff highlight
                        var clickEffBox = _actionIndSnpEff(function(i) {
                                try {
                                        var effGrpsStr = storage.getItem("_EffGrps");
                                        var effGrps = JSON.parse(effGrpsStr);
                                        var index = effGrps.indexOf(i);
                                        if(index !== -1) {
                                                effGrps.splice(index, 1);
                                        } else {
                                                effGrps.push(i);
                                        }
                                        storage.setItem("_EffGrps", JSON.stringify(effGrps));
                                        _reloadCanvas("Changing filter: SnpEff Variant impact");
					_changeEffGrpForm('filter_effgrp');	// Change checkbox of the variant filter. change event does not fire.
                                } catch(e) {}
                        }, XY.x1, XY.y1);
                        if(clickEffBox) {
				_syncVariantDefaultButton();
				break;
			}
                }
		break;
	    }
	}

	indMouseDown = false;
	indMouseMove = false;
}

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

function _mouseMoveIndListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x2 = cursorXY.x;
	XY.y2 = cursorXY.y;
/*
	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);
	}
*/
	while(1) {
		if(storage.getItem("_Eff") === 'on' && storage.getItem("_EffGrps") && !isEmptyIndEffPos()) {
			var overEffBox = _actionIndSnpEff(
				function(i) {},	// Do nothing and get only the mouseover flag
				XY.x2,
				XY.y2
			);
			if(overEffBox) {
				document.body.style.cursor = "pointer";
				break;
			}
		}

		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";
				break;
			}
		}

		if ( Objects.Indicator == "on" &&  XY.y2 < cvs7.height) {
			document.body.style.cursor = "move";
			break;
		}

		document.body.style.cursor = "default";
		break;
	}
/*
	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";
	}
*/
	indMouseMove = true;
}

var lastOverDir = null;
function _mouseOutDirListner(e){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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);

	indMouseDown = false;
	indMouseMove = false;
	lastOverDir = "";
}
function _mouseDownDirListner(e) { }
function _mouseMoveDirListner(e) {
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XY.x1 = cursorXY.x;
	XY.y1 = cursorXY.y;
/*
	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);
	}
*/
	// Below, if Tooltip is inserted, the event will malfunction.
	if ( Objects.Indicator === "on" ) {
		// Detecting left direction
		if ( XY.x1 > indDirBoxPos['left'].l+2 && XY.x1 < indDirBoxPos['left'].r-2 && XY.y1 > indDirBoxPos['left'].t && XY.y1 < indDirBoxPos['left'].b ) {
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "left") _drawDirLeft("red");
			lastOverDir = "left";
//			cvs7.title = "Move to left";
		}else if ( XY.x1 > indDirBoxPos['right'].l+2 && XY.x1 < indDirBoxPos['right'].r-2 && XY.y1 > indDirBoxPos['right'].t && XY.y1 < indDirBoxPos['right'].b ) {
			// Detecting right direction
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "right") _drawDirRight("red");
			lastOverDir = "right";
//			cvs7.title = "Move to right";
		}else if ( XY.x1 > indDirBoxPos['zoomin'].l+2 && XY.x1 < indDirBoxPos['zoomin'].r-2 && XY.y1 > indDirBoxPos['zoomin'].t && XY.y1 < indDirBoxPos['zoomin'].b ) {
			// Detecting zoom in direction
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "zoomin") _drawDirZoomIn("red");
			lastOverDir = "zoomin";
			_drawMessageOnScreen("zoomIn");
//			cvs7.title = "Zoom in";
		}else if ( XY.x1 > indDirBoxPos['zoomout'].l+2 && XY.x1 < indDirBoxPos['zoomout'].r-2 && XY.y1 > indDirBoxPos['zoomout'].t && XY.y1 < indDirBoxPos['zoomout'].b ) {
			// Detecting zoom out direction
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "zoomout") _drawDirZoomOut("red");
			lastOverDir = "zoomout";
//			cvs7.title = "Zoom out";
		}else if ( XY.x1 > indDirBoxPos['leftpage'].l+2 && XY.x1 < indDirBoxPos['leftpage'].r-2 && XY.y1 > indDirBoxPos['leftpage'].t && XY.y1 < indDirBoxPos['leftpage'].b ) {
			//Detecting left direction L
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "leftpage") _drawDirLeftPage("red");
			lastOverDir = "leftpage";
//			cvs7.title = "Move to left window";
		}else if ( XY.x1 > indDirBoxPos['rightpage'].l+2 && XY.x1 < indDirBoxPos['rightpage'].r-2 && XY.y1 > indDirBoxPos['rightpage'].t && XY.y1 < indDirBoxPos['rightpage'].b ) {					//Detecting right direction L
			document.body.style.cursor = "pointer";
			if(lastOverDir !== "rightpage") _drawDirRightPage("red");
			lastOverDir = "rightpage";
//			cvs7.title = "Move to right window";
		}else if ( XY.x1 > indDirBoxPos['clear'].l && XY.x1+2 < indDirBoxPos['clear'].r-2 && XY.y1 > indDirBoxPos['clear'].t && XY.y1 < indDirBoxPos['clear'].b ) {
			//Detecting clear highlight
			if(isAnythingHighlighted()) document.body.style.cursor = "pointer";
//			if(isRegionHighlighted()) document.body.style.cursor = "pointer";
			if(lastOverDir !== "clear") _drawDirClearHighlight("#aaaaaa", "red");
			lastOverDir = "clear";
//			cvs7.title = "Clear selected region";
		} else {
			lastOverDir = "";
			ctx7.putImageData(frameInd, 0, 0);
			ctx4.putImageData(frameCell, 0, 0);
//			cvs7.title = "";
		}
	} else {
		lastOverDir = "";
	}
}

var XYzm=new Object();
function _mouseMoveZoomListner(e){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XYzm.x2 = cursorXY.x;
	XYzm.y2 = cursorXY.y;
/*
	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 overVarFilt = false;
	for(var key in zoomFilterBoxPos) {
		var tgtObj = zoomFilterBoxPos[key];
		if(XYzm.x2 >= tgtObj.l && XYzm.x2 <= tgtObj.l+tgtObj.w-1 && XYzm.y2 >= tgtObj.t && XYzm.y2 <= tgtObj.t+tgtObj.h-1) {
			if(key === 'filter') {
				if(isVariantFiltered()) {
					document.body.style.cursor = "pointer";
					document.getElementById("cvs_zbar").title = "There are filtered variants. Click to reset";	// Tooltip
				} else {
					document.getElementById("cvs_zbar").title = "Variant is not filtered";	// Tooltip
				}
			} else if(key === 'target') {
				var geneName = storage.getItem("_HighlightVariantGene");
				if(geneName) {
					document.body.style.cursor = "pointer";
					document.getElementById("cvs_zbar").title = "[" + geneName + "] variants is highlighted. Click to clear";	// Tooltip
				} else {
					document.getElementById("cvs_zbar").title = "No target highlighted its variant";	// Tooltip
				}
			}
			overVarFilt = true;
		}
	}
	if(overVarFilt) return;
	document.getElementById("cvs_zbar").title = "";

	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){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XYzm.x1 = cursorXY.x;
	XYzm.y1 = cursorXY.y;
/*
	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){
	e.preventDefault();
	var cursorXY = getMouseXY(e);
	if(cursorXY === null) return;
	XYzm.x2 = cursorXY.x;
	XYzm.y2 = cursorXY.y;
/*
	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);
	}
*/
	// Variant filter state
	var clickVarFilt = false;
	for(var key in zoomFilterBoxPos) {
		var tgtObj = zoomFilterBoxPos[key];
		if(XYzm.x2 >= tgtObj.l && XYzm.x2 <= tgtObj.l+tgtObj.w-1 && XYzm.y2 >= tgtObj.t && XYzm.y2 <= tgtObj.t+tgtObj.h-1) {
			if(key === 'filter' && isVariantFiltered()) {
				_changeVariantDefault();
			} else if(key === 'target' && storage.getItem("_HighlightVariantGene")) {
				var highlightedGene = storage.getItem("_HighlightVariantGene");
				storage.setItem("_HighlightVariantGene", "");
				_reloadCanvas("Clear variant highlight : " + highlightedGene);
//				_execCanvas();
			}
			clickVarFilt = true;
		} 
	}
	if(clickVarFilt) return;

	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
var _checkInput = false;
function _forcusSearchTrk(e) {
//	console.log("_forcusSearchTrk:" + _checkInput);
	_checkInput = true;
}
function _blurSearchTrk(e) {
//	console.log("_blurSearchTrk:" + _checkInput);
	_checkInput = false;
}
function _doKeyDown(e){
	var ONDIALOG=false;
//	if ($('#dialog_changechr').is(":visible")) ONDIALOG=true;

	if ($('.select2-dropdown').is(":visible")) ONDIALOG=true;	// for select2.js
	if ($('#dialog_csv').is(":visible")) ONDIALOG=true;
	if ($('#dialog_fa').is(":visible") && !$("#dialog_fa").hasClass('minimized')) ONDIALOG=true;
	if ($('#dialog_p3').is(":visible") && !$("#dialog_p3").hasClass('minimized')) ONDIALOG=true;
	if ($('#dialog_blast').is(":visible") && !$("#dialog_blast").hasClass('minimized')) ONDIALOG=true;
	if ($('#dialog_go').is(":visible") && !$("#dialog_go").hasClass('minimized')) ONDIALOG=true;
	if ($('#dialog_phy').is(":visible") && !$("#dialog_phy").hasClass('minimized')) 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_systree').is(":visible")) ONDIALOG=true;
	if (_checkInput) ONDIALOG=true;	// Top search form
//	if (storage.getItem("_checkInput") == 1) ONDIALOG=true;	// Top search form

	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 66:  /* b for freq or not */
			_changeOnebase();
			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 71: /* g for show GWAS */
			_showGWAS();
			break;
		case 72:  /* h for Manual(help) */
			_dialog_manual();
			break;
		case 76:  /* l for Cursor lines */
			_changeCursorLines(e);
			break; 
		case 80:  /* p for DEPTH */
			_changeMode('dp');
			break;
		case 82:  /* r for SystemTree */
			_showTree();
			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(storage.getItem('_ColorCode')=="on"){
		storage.setItem('_ColorCode',"off");
	}else{
		storage.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 _setClickPhenotypeMainEvent(){
        $(".phenotype_main").unbind("click");
        $(".phenotype_main").click(function() {
                var phenotype = $(this).val();
                phenolist = storage.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>";
                storage.setItem("htmlstr",htmlstr);
                $("#show_phenotype").empty();
                $("#show_phenotype").append(htmlstr);
                storage.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 = storage.getItem("_Phenolist");
          	phenolists = phenolist.split("|");
                var userAgent = storage.getItem("_UA");
                var htmlstr = "<span id=\"phenoid\" style=\"color:white;\">"+phenotype+"</span>";
                var htmlphylo = "<span id=\"phyloid\">"+phenotype+"</span>";
		storage.setItem("_Phenotype", phenotype);
		Objects.Phenotype = phenotype;
		_getPheno(phenotype);

		var selected_chr = $('#pheno_chr').val();
		make_phenotype_gene_table(selected_chr,phenotype,storage.getItem("_Sort"));
/*
		if($('#snpeff_checkbox').prop('checked')){
			make_phenotype_gene_eff_table(phenotype,storage.getItem("_Sort"));
		}else{
			var selected_chr = "all";
			make_phenotype_gene_table(selected_chr,phenotype,storage.getItem("_Sort"));
		}
*/
		_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(storage.getItem("_GWAS") == "off") {
			//var phenoname = phenotype;
                       var strname = storage.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);
		}
		_showLoading();
		_execCanvas();
		framePlot = ctx12.getImageData(0, 0, cvs12.width, cvs12.height);
		_drawRulesforPlot();

		if ( $("#dialog_phy").is(":visible") ) {
			var newLists = getListForm("idlst");
			_dlg_make_phylist(newLists);
		}
		if ( $('#dialog_list').is(":visible") ) {
			var newLists = getListForm("lstBox1");
			_dlg_make_list(newLists);
		}
		_createGWAS(phenotype);
	});
	$('input[name=select_phenotype]').click(function() {
        	if ($('input[name=changeSort]:eq(0)').prop('checked')) {
                        $('input[name=changeSort]:eq(1)').prop('checked', true);
                        changeSort();
                }
        });
}
/*
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 _filterEffGrpEvent(){
        $('#filterbtn').unbind('click');
        $('#filterbtn').on('click', function(){
		var chrstr = $('#pheno_chr').val();
                var phenotype = $('.phenotype_radio:checked').val();
                make_phenotype_gene_table(chrstr,phenotype,storage.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)
	if (isSmartPhone()) {    //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)
	if (isSmartPhone()) {   //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
		if(storage.getItem("_CursorLines") === "on") _drawCursorLines(e, XY.x2, XY.y2);
	}
	_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);
	} else {
		if(storage.getItem("_CursorLines") === "on") _clearCursorLines(e);
	}
	document.body.style.cursor = "default";
	isDrag=false;
}

function _mouseUpPlotListner(e) {
	var rect = e.target.getBoundingClientRect();
	e.preventDefault();
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //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){
			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;
}

var lastBranch = null;
function _mouseMoveSysTreeListner(e) {
	e.preventDefault();
	var xy = getMouseXY(e);
	if(xy === null) return;
	var XY = {"x2":xy.x, "y2":xy.y};

        var branch = treeobj.getMouseOverBranch(XY.x2, XY.y2);
//	if(branch !== null && branch === lastBranch) return;	// Do nothing because it's already highlighted.
//	if(storage.getItem("_CursorLines") === "on" || branch !== null) _drawSystemTree();	// Draw buffer image. Prevents layering of translucent colors.

	// Update mouse cursor.
	if(branch !== null) {
		document.body.style.cursor = "pointer";
	} else {
		document.body.style.cursor = "default";
	}

	// Update tree and row highlight(Acc-title & Varaint-track).
	if(storage.getItem("_CursorLines") === "on") {
		// To always redraw CursorLines, always redraw Tree.
		_drawSystemTree();	// Restore Tree to its initial state.
		if(branch !== null) {
			treeobj.drawMouseOverBranch(branch);
			var leafs = branch.appearanceLeafs;
			_changeAccRowHighlightAll(leafs[0].leafIndex, leafs[leafs.length-1].leafIndex, _getCachedColorset().cursoracc);	// exec "_clearAccRowHighlightAll()" 
		} else {
			_clearAccRowHighlightAll();
		}
	} else {
		if(branch !== lastBranch) {
//			treeobj.undoMouseOverBranch();	// Restore Tree to its initial state. Light weight then _drawSystemTree()
			_drawSystemTree();
			if(branch !== null) {
				treeobj.drawMouseOverBranch(branch);
				var leafs = branch.appearanceLeafs;
				_changeAccRowHighlightAll(leafs[0].leafIndex, leafs[leafs.length-1].leafIndex, _getCachedColorset().cursoracc);
			} else {
				_clearAccRowHighlightAll();
			}
		}
	}
	lastBranch = branch;

	// Update CursorLines.
	if(storage.getItem("_CursorLines") === "on") {
		treeobj.ctx.save();
		var colorset = _getCachedColorset();
		treeobj.ctx.fillStyle = colorset.cursorline;
		treeobj.ctx.fillRect(xy.x-1, 0, 1, treeobj.cvs.height);

		if(xy.x>=treeobj.lMargin && xy.x<=(treeobj.lMargin + treeobj.treeWidth)) {
			var heightReal = treeobj.getHeightByX(xy.x);
// console.log("Height:" + heightReal + " <= " + xy.x + "/" + treeobj.treeWidth);
			if(heightReal !== null) {
				var height = getFormattedNumberString(heightReal, 4);
//				var height = parseInt(heightReal*1000)/1000;
				treeobj.ctx.textAlign = "end";
				treeobj.ctx.textBaseline = "bottom";
				treeobj.ctx.fillStyle = "white";
				treeobj.ctx.fillText(height, xy.x, xy.y+1);
				treeobj.ctx.fillStyle = "rgba(255,0,0,1)";
				treeobj.ctx.fillText(height, xy.x - 1, xy.y);	
			}
		}
		treeobj.ctx.restore();
		_drawCursorLines(e, xy.x, xy.y);
	}
}
function _mouseDownSysTreeListner(e) {
	e.preventDefault();
	var xy = getMouseXY(e);
	if(xy === null) return;

	var maxFrame = 20;	// Max animation frame(1frame = 16.7ms)
	var branch = treeobj.getMouseOverBranch(xy.x, xy.y);
	if(branch !== null) {
		_showLoading();	// Remove all events during animation. _showLoading may be called multiple times from now on, but there is no problem.
		var accId2ObjMap = _getAllAccId2listsObj();
		if(branch.collapsedBranch != null) {
			// Expand
			var expandedLeafs = branch.collapsedBranch.appearanceLeafs;
/*
			var loadDbs = [];
			for(var i=0,len=expandedLeafs.length; i<len; i++) {
				var listsObj = accId2ObjMap[expandedLeafs[i].childs];
				loadDbs.push(listsObj.db);
			}
			storage.setItem("_ListsTgt", loadDbs.join(','));
*/
			var frame = 5 + parseInt(expandedLeafs.length/3);	// Change animation speed depending on the height to expand.
			if(frame>maxFrame) frame = maxFrame;
			expandCanvasVertical(
				[treeobj.cvs, cvs3, cvs4],
				branch.y + treeobj.rowHeight/2,
				(branch.collapsedBranch.appearanceLeafs.length - 1) * treeobj.rowHeight,
				frame,
				function() {
					var collapsedBranch = treeobj.expandBranch(branch);
					commonEndFunc(collapsedBranch);
				}
			);
		} else {
			// Collapse
			var frame = 5 + parseInt(branch.appearanceLeafs.length/3);
			if(frame>maxFrame) frame = maxFrame;
			expandCanvasVertical(
				[treeobj.cvs, cvs3, cvs4],
				branch.appearanceLeafs[0].y + treeobj.rowHeight/2,
				(branch.appearanceLeafs.length-1) * treeobj.rowHeight * -1,
				frame,
				function() {
					var collapsedBranch = treeobj.collapseBranch(branch);
					commonEndFunc(collapsedBranch, branch.appearanceLeafs[0].leafIndex);
				}
			);
		}
	}

	function commonEndFunc(collapsedBranch, moveToAccIdx) {
		treeobj.updateTree();
		if(isPhylipTreeUsing()) {
			// Since collapsedBranch is a reference of the itreeobj member variable, copy it so that it will not be erased by initTree().
			phylipCollapsedBranch = Object.assign({}, collapsedBranch);
		} else {
			storage.setItem("_SystemTreeCollapsedBranch", JSON.stringify(collapsedBranch));
		}

		if(moveToAccIdx || moveToAccIdx === 0) {
			// Since Extend and Collapse do not change above the node, the destination Acc index can be specified before updating the Canvas.
			var contentTop = getMoveToSearchAccTop(moveToAccIdx);
			document.getElementById("content").scrollTop = contentTop;
		}

		flgUpdateTree = true;
		syncSystemTree2Lists();
		lastBranch = null;
	}
}
function _mouseOutSysTreeListner(e) {
	document.body.style.cursor = "default";
//	if(lastBranch !== null) treeobj.undoMouseOverBranch(lastBranch);
	_drawSystemTree();	// Draw buffer image.
	lastBranch = null;
}

function _mouseDownTreeFooterListner(e) {
	e.preventDefault();
	var xy = getMouseXY(e);
	if(xy === null) return;

	if(isPhylipTreeUsing() && _mouseOverTreeIcon('undo', xy)) {
//	if(flgUsingPhylipTree && _mouseOverTreeIcon('undo', xy)) {
		returnPhylip2WholeGenomeTree();
		delete treeIconPos['undo'];
	} else if(_mouseOverTreeIcon('clear', xy) && treeobj.lastChangedBranch!=null) {
		_dialog_clearSystreeHighlight();
	} else if(_mouseOverTreeIcon('hide', xy)) {
		hideSystemTreeSimple(true);
	} else if(_mouseOverTreeIcon('unhide', xy)) {
		hideSystemTreeSimple(false);
	}
}

var lastMouseMoveTreeFooterIcon = null;
function _mouseMoveTreeFooterListner(e) {
	e.preventDefault();
	var xy = getMouseXY(e);
	if(xy === null) return;

	var cvsTreeFooter = $("#cvs_tree_footer");
	var ctxF = cvsTreeFooter[0].getContext("2d");
	if(isPhylipTreeUsing() && _mouseOverTreeIcon('undo', xy)) {
//	if((flgUsingPhylipTree && _mouseOverTreeIcon('undo', xy))) {
		_drawTreeFooter(ctxF, treeobj, 0, 0, 'undo');
		lastMouseMoveTreeFooterIcon = 'undo';
		if(systreeFlg) {
			document.getElementById("cvs_tree_footer").title = "Return whole genome tree";
		} else {
			document.getElementById("cvs_tree_footer").title = "Cancel phylogenetic tree";
		}
		document.body.style.cursor = "pointer";
	} else if(_mouseOverTreeIcon('clear', xy)) {
		_drawTreeFooter(ctxF, treeobj, 0, 0, 'clear');
		lastMouseMoveTreeFooterIcon = 'clear';
		document.getElementById("cvs_tree_footer").title = "Clear tree highlight";
		if(treeobj.lastChangedBranch === null) {
			document.body.style.cursor = "default";
		} else {
			document.body.style.cursor = "pointer";
		}
	} else if(_mouseOverTreeIcon('hide', xy)) {
		_drawTreeFooter(ctxF, treeobj, 0, 0, 'hide');
		lastMouseMoveTreeFooterIcon = 'hide';
		document.getElementById("cvs_tree_footer").title = "Close tree";
		document.body.style.cursor = "pointer";
	} else if(_mouseOverTreeIcon('unhide', xy)) {
		_drawTreeFooter(ctxF, treeobj, 0, 0, 'unhide');
		lastMouseMoveTreeFooterIcon = 'unhide';
		document.getElementById("cvs_tree_footer").title = "Open tree";
		document.body.style.cursor = "pointer";
	} else {
		if(lastMouseMoveTreeFooterIcon !== null) _drawTreeFooter(ctxF, treeobj, 0, 0);
		lastMouseMoveTreeFooterIcon = null;
		document.getElementById("cvs_tree_footer").title = "";
		document.body.style.cursor = "default";
	}

/*
	if((isPhylipTreeUsing() && _mouseOverTreeIcon('undo', xy)) || _mouseOverTreeIcon('clear', xy) || _mouseOverTreeIcon('hide', xy)) {
//	if((flgUsingPhylipTree && _mouseOverTreeIcon('undo', xy)) || _mouseOverTreeIcon('clear', xy) || _mouseOverTreeIcon('hide', xy)) {
		document.body.style.cursor = "pointer";
	} else {
		document.body.style.cursor = "default";
	}
*/
}
function _mouseOutTreeFooterListner(e) {
	if(lastMouseMoveTreeFooterIcon !== null) {
		var cvsTreeFooter = $("#cvs_tree_footer");
		var ctxF = cvsTreeFooter[0].getContext("2d");
		_drawTreeFooter(ctxF, treeobj, 0, 0);
	}
	lastMouseMoveTreeFooterIcon = null;
	document.getElementById("cvs_tree_footer").title = "";
	document.body.style.cursor = "default";
}
function _mouseOverTreeIcon(typeStr, xy) {
	if( !(typeStr in treeIconPos) ) {
		return false;
	} else {
		return (xy.x >= treeIconPos[typeStr]['left'] && xy.x < treeIconPos[typeStr]['left'] + treeIconPos[typeStr]['size'] &&
			xy.y >= treeIconPos[typeStr]['top'] && xy.y < treeIconPos[typeStr]['top'] + treeIconPos[typeStr]['size']);
	}
}

function getMouseXY(e) {
	// Since this function is executing preventDefault(), it prevents default operation.
	var rect = e.target.getBoundingClientRect();
//	e.preventDefault();
	var xy = {};
	// Getting coordinate(pc or iOS)
	if (isSmartPhone()) {    //iPad & iPhone & Android
		if(!e.touches && !e.changedTouches) return null;
		var touch = e.touches[0] || e.changedTouches[0];	// left:start,move right:end
		xy.x = parseInt(touch.pageX-(document.body.scrollLeft || document.documentElement.scrollLeft))-parseInt(rect.left);
		xy.y=parseInt(touch.pageY-(document.body.scrollTop || document.documentElement.scrollTop))-parseInt(rect.top);
	} else {	//PC
		xy.x=parseInt(e.clientX)-parseInt(rect.left);
		xy.y=parseInt(e.clientY)-parseInt(rect.top);
	}
	return xy;
}

/*
var isSmaPho = null;
function isSmartPhone() {
	if(isSmaPho === null) {
		var isiPad = navigator.userAgent.match(/iPad/i) != null;
		var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
		var isAndroid = navigator.userAgent.match(/Android/i) != null;
		isSmaPho = (isiPad || isiPhone || isAndroid);
	}
	return isSmaPho;
}

///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=storage.getItem("_Phenotype");
		var selected_chr = $('#pheno_chr').val();;
		make_phenotype_gene_table(selected_chr,select_phenotype,"Position");
		storage.setItem("_Sort","Position");
	} else if (document.getElementById("Probability").checked === true) {
                var select_phenotype=storage.getItem("_Phenotype");
		var selected_chr = $('#pheno_chr').val();
                make_phenotype_gene_table(selected_chr,select_phenotype,"Probability");
		storage.setItem("_Sort","Probability");
	}
}
