//var i_width=window.document.body.clientWidth//网页可用宽度  
//var i_height=window.document.body.clientHeight;
//var pic = document.getElementById("myCanvas");
//pic.style.height=i_height+"px";
//pic.style.width=i_width+"px";
var index=0
var xc=0
//var int=self.setInterval('clock()',100);
var int2=self.setInterval('changeFrontImage()',100);
var int1=self.setInterval('updatectrl()',100);
var int3=self.setInterval('changeRearImage()',100);
var int4=self.setInterval('changeLeftImage()',100);
var int5=self.setInterval('changeRightImage()',100);
var int6=self.setInterval('timerupload()',100);

var oldvel= 0;
var oldwheel = 0.5;
var nchange = 15;
var conupserv = 0;

	var lat = 39.0;
	var lon = 117.0;

	var n = 323;
	var ic = 0;
	var irear = 0;
	var ileft = 0;
	var iright = 0;
        var upcount = 0;
	var image=new Image();//放入函数里面：浏览器运行一分钟左右系统内存用到高达90%，故做一个全局的反冲图片
	var imagerear=new Image();
	var imageleft=new Image();
	var imageright=new Image();



                document.onkeydown=function(event){
			nchange = 15;
                    //keyCode来获取按键的编码，来判断那个键是否按下
                    //还有altKey shiftKry altKey等 来判断是否按下
//                    console.log("按键按下");
                    if(event.keyCode==87){
			var valuex = 0.1;
			valuex = parseFloat(document.getElementById("sildervel").value);
			valuex = valuex + 0.1;
			document.getElementById("sildervel").value = valuex;  
                        console.log("w键按下了");
//			document.getElementById("demo").innerHTML=valuex;
                    }
                    if(event.keyCode==83){
			document.getElementById("sildervel").value = parseFloat(document.getElementById("sildervel").value) - 0.1;  
                        console.log("s键按下了");
//			document.getElementById("demo").innerHTML=Date();
                    }
                    if(event.keyCode==65){
			document.getElementById("silderwheel").value = parseFloat(document.getElementById("silderwheel").value) - 0.01;
                        console.log("a键按下了");
//			document.getElementById("demo").innerHTML=Date();
                    }
                    if(event.keyCode==68){
			document.getElementById("silderwheel").value = parseFloat(document.getElementById("silderwheel").value) + 0.01;
                        console.log("d键按下了");
//			document.getElementById("demo").innerHTML=Date();
                    }
                    if(event.keyCode==80){
			document.getElementById("sildervel").value = 0;
                    }
                    if(event.keyCode==67){
			document.getElementById("silderwheel").value = 0.5;
                    }
                    if(event.altKey && event.keyCode==89){
                        console.log("alt+y键同时按下了");
                    }
                }
//                document.onkeyup=function(){
//                    console.log("按键松开");
//                }
                
                //2.
                var input=document.getElementsByTagName("input")[0];
                input.onkeydown=function(){
                    //console.log("input中按下");
                    //可以来限制input中不能输入数字
                    if(event.keyCode>=48 && event.keyCode<=57){//数字1-9对应48-57
                        //取消input的默认行为，使输入东西不显示
                        return false;
                    }
            }

function onClickStop(){	
	document.getElementById("sildervel").value = 0;  
//	document.getElementById("demo").innerHTML=Date();
}
function onClickCenter(){	
	document.getElementById("silderwheel").value = 0.5;  
//	document.getElementById("demo").innerHTML=Date();
}

function updatectrl(){ 

	lat = lat + 0.0001;
	
	
	var vel = parseFloat(document.getElementById("sildervel").value);
	var wheel = parseFloat(document.getElementById("silderwheel").value);
	if((vel == oldvel)&&(wheel == oldwheel))
	{
		if(nchange > 0)nchange = nchange-1;
		if(nchange <= 0)
		{
			if(vel>=0)
			{
				vel = vel - 0.1;
				document.getElementById("sildervel").value = vel;
				oldvel = parseFloat(document.getElementById("sildervel").value);
			}
		}
	}
	else
	{
		nchange = 15;
		oldvel = vel;
		oldwheel = wheel;
	}
//	document.getElementById("demo").innerHTML=nchange;
}
	function changeFrontImage()
	{ 
		if(ic == 1)
		{
			return;
		}
		ic = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		image.src="./picfront?"+n;
//		imagerear.src="./picrear?"+n;
//		imageleft.src="./picleft?"+n;
//		imageright.src="./picright?"+n;
		n++; 
		var nerror = 0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
		
		image.onload = function () //确保图片已经加载完毕  
		{  
			if (image.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;

				imgScale = CanvasWidth/image.width;
				if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/image.height;
//				cxt.drawImage(image,0,0);  
				cxt.drawImage(image,0,0,image.width,image.height,20+CanvasWidth/2.0,0,image.width*imgScale,image.height*imgScale);  
//				cxt.drawImage(image,0,0,image.width,image.height,0,0,image.width*imgScale*0.5,image.height*imgScale*0.5); 
//				cxt.drawImage(image,0,0,image.width,image.height,40+CanvasWidth*1.5,0,image.width*imgScale*0.5,image.height*imgScale*0.5); 
//				cxt.drawImage(image,0,0,image.width,image.height,20+CanvasWidth/2.0,20+CanvasHeight,image.width*imgScale,image.height*imgScale); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			ic = 0;
			
		}  
		image.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			ic = 0;
		}; 
		imagerear.onload = function () //确保图片已经加载完毕  
		{  
			if (imagerear.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;

				imgScale = CanvasWidth/imagerear.width;
				if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/imagerear.height;
//				cxt.drawImage(image,0,0);  
//				cxt.drawImage(image,0,0,image.width,image.height,20+CanvasWidth/2.0,0,image.width*imgScale,image.height*imgScale);  
//				cxt.drawImage(image,0,0,image.width,image.height,0,0,image.width*imgScale*0.5,image.height*imgScale*0.5); 
//				cxt.drawImage(image,0,0,image.width,image.height,40+CanvasWidth*1.5,0,image.width*imgScale*0.5,image.height*imgScale*0.5); 
				cxt.drawImage(imagerear,0,0,imagerear.width,imagerear.height,20+CanvasWidth/2.0,20+CanvasHeight,imagerear.width*imgScale,imagerear.height*imgScale); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			ic = 0;
			
		}  
		imagerear.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			ic = 0;
		};  
		//ctx.save();
  	}

	function changeRearImage()
	{ 
		if(irear == 1)
		{
			return;
		}
		irear = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		imagerear.src="./picrear?"+n;
		n++; 
		var nerror = 0;
		
		imagerear.onload = function () //确保图片已经加载完毕  
		{  
			if (imagerear.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
				imgScale = CanvasWidth/imagerear.width;
				if(imgScale* imagerear.height > CanvasHeight)imgScale = CanvasHeight/imagerear.height;
//				cxt.drawImage(image,0,0);  
				cxt.drawImage(imagerear,0,0,imagerear.width,imagerear.height,20+CanvasWidth/2.0,20+CanvasHeight,imagerear.width*imgScale,imagerear.height*imgScale); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			irear = 0;
			
		}  
		imagerear.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			irear = 0;
		};  
		//ctx.save();
  	}

	function changeLeftImage()
	{ 
		if(ileft == 1)
		{
			return;
		}
		ileft = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		imageleft.src="./picleft?"+n;
		n++; 
		var nerror = 0;
		
		imageleft.onload = function () //确保图片已经加载完毕  
		{  
			if (imageleft.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
				imgScale = CanvasWidth/imageleft.width;
				if(imgScale* image.height > CanvasHeight)imgScale = CanvasHeight/imageleft.height;
//				cxt.drawImage(image,0,0);   
				cxt.drawImage(imageleft,0,0,imageleft.width,imageleft.height,0,0,imageleft.width*imgScale*0.5,imageleft.height*imgScale*0.5); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			ileft = 0;
			
		}  
		imageleft.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			ileft = 0;
		};  
		//ctx.save();
  	}

	function changeRightImage()
	{ 
		if(iright == 1)
		{
			return;
		}
		iright = 1;
		var canvas=document.getElementById("myCanvas2");  
		var cxt=canvas.getContext("2d");

		//ctx.restore();
		imageright.src="./picright?"+n;
		n++; 
		var nerror = 0;
		
		imageright.onload = function () //确保图片已经加载完毕  
		{  
			if (imageright.complete)//如果图片加载完成，绘制
			{
				cxt.save();
				imgScale = 1.0;
				CanvasWidth = 960*(1920-40)/1920;
				CanvasHeight = 540*(1920-40)/1920;
				imgScale = CanvasWidth/imageright.width;
				if(imgScale* imageright.height > CanvasHeight)imgScale = CanvasHeight/imageright.height;
//				cxt.drawImage(image,0,0);  
				cxt.drawImage(imageright,0,0,imageright.width,imageright.height,40+CanvasWidth*1.5,0,imageright.width*imgScale*0.5,imageright.height*imgScale*0.5); 
				cxt.restore();
				nerror = 0;
				upcount++;
			}
			else
			{
				nerror++;
				if(nerror>100)
				{
					alert(image.complete);
					nerror = 0;
				}
			}
			iright = 0;
			
		}  
		imageright.onerror=function(){  
			document.getElementById("F2").innerHTML="error N:"+n; 
			iright = 0;
		};  
		//ctx.save();
  	}

function clock() 
{ 
	if(ic == 0)
	{
		ic = 1;
		changeImage();
	}
} 

function timerupload() 
{ 
if(conupserv == 1){
    index=index+1;
    var stritem = '{"Ctrl":';
    var inputcheckauto = document.getElementById("ctrlauto");
    var inputshift = document.getElementById("shiftdrive");
    if(inputcheckauto.checked)
    {
	stritem = stritem+'"Auto"';
    }
    else
    {
	stritem = stritem+'"Man"';
    }
    stritem = stritem + ',"Shift":';
    if(inputshift.checked)
    {
	stritem = stritem +'"Drive"';
    }
    else
    {
	stritem = stritem +'"Rear"';
    }
    stritem = stritem + ',"Vel":';
    stritem = stritem +'"' + document.getElementById("sildervel").value +'"';
    stritem = stritem + ',"Wheel":';
    stritem = stritem +'"' + document.getElementById("silderwheel").value +'"';
    stritem = stritem + '}';
//    var stritem = '{"":"1"}';
 //   obj = JSON.parse(stritem);
    connection.send(stritem);}
}
function load() {


//	changeImage();

  var wsproto = (location.protocol === 'https:') ? 'wss:' : 'ws:';
  connection = new WebSocket(wsproto + '//' + window.location.host + '/remoteservice');
//  websock_text_field = document.getElementById('websock_text_field');
  connection.onmessage = function (e) {
	conupserv = 1;
var text = e.data;
//document.getElementById("demo").innerHTML=text;
try {
    var obj = JSON.parse(text);
     if (obj.hasOwnProperty("Lon")) {
 	var Lon = obj.Lon;
        var Lat = obj.Lat;
	var Heading = obj.Heading;
	theLocation(Lon,Lat,Heading);
//  	document.getElementById("demo").innerHTML=Heading;
     }
     else
     {
//	document.getElementById("demo").innerHTML="no lon";
     }	
	

} 
catch (error) {
 //   alert(error.message);

}
   }
}