var color=["#FF82AB","#CD6889","#FF1493","#CD1076","#C0FF3E"];
var flag=[0,0,0,0,0,0,0,0,0];
var num=0;
var timestampOri = Date.now();
function ShowCalibrationPoint(){
    document.getElementById("btn1").style.backgroundColor="#FFB6C1";
    document.getElementById("btn2").style.backgroundColor="#FFB6C1";
    document.getElementById("btn3").style.backgroundColor="#FFB6C1";
    document.getElementById("btn4").style.backgroundColor="#FFB6C1";
    document.getElementById("btn5").style.backgroundColor="#FFB6C1";
    document.getElementById("btn6").style.backgroundColor="#FFB6C1";
    document.getElementById("btn7").style.backgroundColor="#FFB6C1";
    document.getElementById("btn8").style.backgroundColor="#FFB6C1";
    document.getElementById("btn9").style.backgroundColor="#FFB6C1";
    
    document.getElementById("btn1").style.visibility='visible';
    document.getElementById("btn2").style.visibility='visible';
    document.getElementById("btn3").style.visibility='visible';
    document.getElementById("btn4").style.visibility='visible';
    document.getElementById("btn5").style.visibility='visible';
    document.getElementById("btn6").style.visibility='visible';
    document.getElementById("btn7").style.visibility='visible';
    document.getElementById("btn8").style.visibility='visible';
    document.getElementById("btn9").style.visibility='hidden';
		document.getElementById("btn9").disabled = false;
}
ShowCalibrationPoint();
window.addEventListener("click", onmouseclick);
function onmouseclick(event) {
	console.log(1111111111111)
	gazefilter.tracker.calibrate(    //九点校正,发送当前点击位置进行校正
		event.timeStamp,  // relative to performance.timeOrigin
		event.screenX,  // in pixels
		event.screenY,  // in pixels
		1.0  // see note below
	  );
}

function change1(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}
	 if(flag[0]>=4){
	   document.getElementById("btn1").style.backgroundColor=color[flag[0]];
	}
	else{
		document.getElementById("btn1").style.backgroundColor=color[flag[0]];
		flag[0]++;
	}
  
}
function change2(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}  
	 if(flag[1]>=4){
	   document.getElementById("btn2").style.backgroundColor=color[flag[1]];
	}
	else{
		document.getElementById("btn2").style.backgroundColor=color[flag[1]];
		flag[1]++;
	}
	   
}
function change3(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	} 
	 if(flag[2]>=4){
	   document.getElementById("btn3").style.backgroundColor=color[flag[2]];
	}
	else{
		document.getElementById("btn3").style.backgroundColor=color[flag[2]];
		flag[2]++;
	}
		
}
function change4(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}
	 if(flag[3]>=4){
	   document.getElementById("btn4").style.backgroundColor=color[flag[3]];
	}
	else{
		document.getElementById("btn4").style.backgroundColor=color[flag[3]];
		flag[3]++;
	}
	   
}
function change5(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}   
	 if(flag[4]>=4){
	   document.getElementById("btn5").style.backgroundColor=color[flag[4]];
	}
	else{
		document.getElementById("btn5").style.backgroundColor=color[flag[4]];
		flag[4]++;
	}
	  
}
function change6(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}
	 if(flag[5]>=4){
	   document.getElementById("btn6").style.backgroundColor=color[flag[5]];
	}
	else{
		document.getElementById("btn6").style.backgroundColor=color[flag[5]];
		flag[5]++;
	}
		
}
function change7(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	} 
	 if(flag[6]>=4){
	   document.getElementById("btn7").style.backgroundColor=color[flag[6]];
	}
	else{
		document.getElementById("btn7").style.backgroundColor=color[flag[6]];
		flag[6]++;
	}
	   
}
function change8(){
	for(let i=0;i<8;i++){
		if(flag[i]==4)
		num++;
	}
	if(num==8){
		document.getElementById("btn9").style.visibility='visible';
	}else{
		num=0;
	}     
	 if(flag[7]>=4){
	   document.getElementById("btn8").style.backgroundColor=color[flag[7]];
	}
	else{
		document.getElementById("btn8").style.backgroundColor=color[flag[7]];
		flag[7]++;
	}
	
}
function change9(){
	 if(flag[8]>=4){
		document.getElementById("btn9").style.backgroundColor=color[flag[8]];
		document.getElementById("btn1").style.visibility='hidden';
		document.getElementById("btn2").style.visibility='hidden';
		document.getElementById("btn3").style.visibility='hidden';
		document.getElementById("btn4").style.visibility='hidden';
		document.getElementById("btn5").style.visibility='hidden';
		document.getElementById("btn6").style.visibility='hidden';
		document.getElementById("btn7").style.visibility='hidden';
		document.getElementById("btn8").style.visibility='hidden';
		document.getElementById("btn9").style.visibility='hidden';
		window.removeEventListener("click", onmouseclick);    //九点校正完成，取消鼠标事件，并开始绘制轨迹点
		startTrace()
	}
	else{
		document.getElementById("btn9").style.backgroundColor=color[flag[8]];
		flag[8]++;
	} 
}