<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String server_ip = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/Interface/vhcphoto/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    <% 
    String uname = "";
    String uname2 = "";
    if(request.getParameter("uName") != null){
    	 uname = new String(request.getParameter("uName").getBytes("ISO-8859-1"),"utf-8");
    	 uname2 = new String(request.getParameter("uName").getBytes("ISO-8859-1"),"GBK");
    } 
    String sstype= request.getParameter("type");
    %>
    
    <title></title>
	<link rel="Shortcut icon" href="<%=path%>/gpsonline/image/pic/logo.ico" type="image/x-icon"/> 
	<link rel="stylesheet" type="text/css" href="<%=path%>/gpsonline/css/playback.css"/>
	<link href="<%=path%>/gpsonline/css/jquery-ui-1.10.3.custom.css" rel="stylesheet">
	
	<link rel="stylesheet" href="<%=path%>/gpsonline/css/cmonitor/user/monitor.css" />
		<link rel="stylesheet" href="<%=path%>/gpsonline/css/monitor/zTreeStyle.css" />
		<link rel="stylesheet" href="<%=path%>/gpsonline/css/cmonitor/user/marker.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/user/userframe-c.css" />
		<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/cmonitor/v3/global.css" />
	<link rel="stylesheet"
			href="<%=path%>/gpsonline/css/table/bootstrap.min.css" />
	<link rel="stylesheet"	href="<%=path%>/gpsonline/css/table/jquery.resizableColumns.css" />
	
	<script type="text/javascript" src="<%=path%>/gpsonline/js/calendar/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/table/jquery.min.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/Base64.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/cmarker/baidu_marker.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/marker/jquery.ztree.core-3.5.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/marker/jquery.ztree.excheck-3.5.min.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/marker/jquery.ztree.exedit-3.5.min.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/marker/markersearch.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/language.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/jquery-ui-1.10.3.custom.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/table/jquery.resizableColumns.js"></script>
	<script type="text/javascript"	src="<%=path%>/gpsonline/js/table/store.js"></script>
	
	<style>
		#speed .ui-slider-range { background: #729fcf; }
		#speed .ui-slider-handle { border-color: #729fcf; }
		#slider .ui-slider-range { background: #729fcf; }
		#slider .ui-slider-handle { border-color: #729fcf; }
		.table td{text-align:center;  word-break: keep-all;white-space:nowrap;}
		.table th{text-align:center; font-weight:bold; word-break: keep-all;white-space:nowrap;}
	    .mask {position: absolute;top: 0px;filter: alpha(opacity=60);background-color: #FFF;z-index: 999;left: 0px;opacity:0.5;-moz-opacity:0.6;}       
    	.content{display:none;z-index:1000;position:fixed; text-align:center; color:#0d96e5; font-size:14px;}
	</style>
    <script type="text/javascript">
      //window.onerror = function(){return true};
      var topics = [];
      var alldata = []; 
      var speedvalue=500;
      var x;
      var y;
      var series ;
      var curveb = true;
      var row;
      var table1;
      var timeArray=[];
      var youhaoArray=[];
      var suduArray=[];
      var yctime;
      var carname;
      var strCarName;
     
	  var photobool = false;
	  var wuxiaobool  = false;
	  var tingchedianbool = 0;
      $(window).load(function () {
    	 photourl= '<%=server_ip%>';
      	 carname = '<%=request.getParameter("carname")%>';
      //	 var b = new Base64();  
         //strCarName =b.decode(carname);  
         strCarName =decodeURI(carname); 
      	 document.title=strCarName + " | 轨迹回放";
      	 document.getElementById('carname').innerHTML=strCarName;
      	 var sstype='<%=sstype%>';
	     if(sstype!="null"){
	     	$('#selectdiv').hide();
	     }
		  $( "#slider" ).slider( "disable" );
		  $( "#speed" ).slider({
				range : "min",
				max : 140,
				min : 10,
				value : 100,
				orientation : 'horizontal'
		  });
		$('#speed').bind('slidechange', function(event, ui) {
			var r=ui.value;
			var t=4;
			var w=100;
			var p=[10000,5000,3000,1000,500,100,10];
			var u=[0,20,40,60,80,100,120,140];
			for(var s=0,o=u.length-1;s<o;s++){
				if(r>=u[s]&&r<u[s+1]){
					t=s;
					break
				}
				if(r>=140){
					t=6;
					break
				}
			}
			speedvalue=p[t];
			//alert(speedvalue);
		});  
		
		mapType = document.getElementById("mapType").value;
		var  myselect=document.getElementById("select");
		
		if(1==mapType){
			 baiduMap();
			 myselect.options[0].selected = true;
		}else{
			initialize2();
			myselect.options[1].selected = true;
		}
		$("#table1").resizableColumns({
		    store: window.store
		});
		
      })
      function ShowPhoto(){
        
		if(photobool){
			photobool = false;
		}else{
			   photobool = true;
		}
      }
      function ShowWuxiao(){
          
  		if(wuxiaobool){
  			wuxiaobool = false;
  		}else{
  			wuxiaobool = true;
  		}
      }
      function ShowTingchedian(){
          
    		if(tingchedianbool==1){
    			tingchedianbool=0;
    		}else{
    			tingchedianbool=1;
    		}
      }
      function f5(){
     	  document.getElementById("startTime").value="null";
		  document.getElementById("endTime").value="null";
		  times.length = 0;
      	  var d = new Date();
		  var vYear = d.getFullYear();
		  var vMon = d.getMonth() + 1;
		  var vDay = d.getDate();
		  var start=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 00:00:00";
		  var end=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 23:59:59";
		  $("#start").val(start);
		  $("#end").val(end);
		  
		  //alert();
		  if(car!=null){
		   	  clearTimeout(yctime);
		  	  var chart = $('#container').highcharts();
		      if (chart.series.length) {
		      		// chart.get('temperature-xaxis').remove();
		      		// chart.get('temperature-yaxis').remove();
		             chart.series[0].setData([]);
		             chart.series[1].setData([]);
		             chart.series[2].setData([]);
		      }
		      for(var i=1;i<=car.topics.length;i++){
		      		$('#row'+i).remove();
		      }
	          if(1==mapType){
			    baiduMap();
			    markers.length=0;
			  }else{
				initialize2();
			  }
		  	 
		  	  playkg = null;
		  	  bol = false;
		  	 
		  	  $("#startplay").val("轨迹回放");
		  	  row_count = 1;
		  	  //$( "#slider" ).slider( "option", "value", 0 );
		      $( "#slider" ).slider( "disable" );
		  	  // document.getElementById("f5").style.display = "none";
		 	  car = null;
		 	  topics.length=0;
		 	  $('#f5').attr('disabled', true);
		 	  $('#end').attr('disabled', false);
			  $('#start').attr('disabled', false);
			  tnum = 0;
			  Ascending =0;
			 document.getElementById("lic").innerHTML="";
			 document.getElementById("youh").innerHTML="";
			 document.getElementById("time").innerHTML="";
		  }
      }
      var playkg = null;
      var tkey;
      var dtype = 0;
      function play(){
	    var start = $("#start").val();
	    var end = $("#end").val();
	    
	   // alert($("#startplay").val());
	   	if(playkg == null){
	   		var radio = document.getElementsByName("gjdata");
			for(var i=0;i<radio.length;i++){
				  if(radio[i].checked==true){
				  	dtype=radio[i].value;
				  }
			 }
       
	   		 initialize(start,end);
	   		// document.getElementById("f5").style.display = "";
			 $('#f5').attr('disabled', false);
			 $('#end').attr('disabled', true);
			 $('#start').attr('disabled', true);
	   		// $("#startplay").val("开始回放");
	   		// playkg = false;
	   		// $( "#slider" ).slider( "option", "disabled", false );
	   		
	   	}else
	   	if(playkg == false){
	   		setTimeout("alcurve()", speedvalue);
	   		//curve();
	   		$("#startplay").val("暂停回放");
	   		//t=tkey;
	   		playkg = true;
	   		curveb = true;
	   		//changedata(ser);
	   	}else{
	   		$("#startplay").val("开始回放");
	   		///tkey=t;
	   		//alert(car.topics.length);
	   		//t=car.topics.length;
	   		playkg = false;
	   		curveb = false;
	   	}
	    
	   //
 	  }
 	  
 	 function stop()
	 {
	 		$("#startplay").val("开始回放");
	   		tkey=-1;
	   		//alert(car.topics.length);
	   		t=car.topics.length;
	   		playkg = true;
	   		curveb = false;
	   		marker.setMap(null);
	   		infowindow.close();
	   		$( "#slider" ).slider( "option", "value", 0 );
	   		table1.empty();
	   		row_count = 1;
	   		car = null;
	   		//alert(1);
		
	 }
 	var row_count = 1;
 	 
	function addNew1(){
		 for(var t=0; t<car.topics.length;t++){
			var direction ="";
		 	var ti = parseInt(car.topics[t].dir);
				  if(ti>27 && ti<=72){
						
						direction="东北";
					}else if(ti>72 && ti<=117){
					
						direction="东";
					}
					else if(ti>117 && ti<=162){
						
						direction="东南";
					}
					else if(ti>162 && ti<=207){
						
						direction="南";
					}
					else if(ti>207 && ti<=252){
						
						direction="西南";
					}
					else if(ti>252 && ti<=297){
						
						direction="西";
					}
					else if(ti>297 && ti<=342){
						
						direction="西北";
					}
					else {
						
						direction="北";
					}
		table1 = $('#table1');
		var firstTr = table1.find('tbody>tr:first'); 
		//alert("row"+row_count);
		row = $("<tr id='row"+row_count+"' onDblClick='DblClick(\""+row_count+"\")'></tr>"); 
		var td = $("<td></td>");
		td.append($("<b>"+row_count+"</b>") 
		); 
		
		
		var td2 = $("<td></td>"); 
		td2.append(car.topics[t].recvt
		); 
		
		var td3 = $("<td></td>"); 
		td3.append((car.topics[t].lat+"").substring(0,8)
		); 
		var td4 = $("<td></td>"); 
		td4.append((car.topics[t].lng+"").substring(0,8)
		); 
		
		var td5 = $("<td></td>"); 
		td5.append(car.topics[t].veo.toFixed(1)
		); 
		
		var td6 = $("<td></td>"); 
		td6.append(direction
		); 
		
		var td7 = $("<td></td>");
		var lens =  len(car.topics[t].state);
		if(lens>10){
			var strs = car.topics[t].state.substring(0, 9);
			td7.append(strs+"...");
		}else{ 
			td7.append(car.topics[t].state);
		}
		 
		var td8 = $("<td></td>");
		td8.css("text-align","left");
		//alert(td8.);
		td8.append(car.topics[t].posinfo
		);

		var td9 = $("<td></td>"); 
		td9.append(car.topics[t].oil.toFixed(1)
		); 
		
		row.append(td);
		row.append(td2);
		row.append(td3);
		row.append(td4);
		row.append(td5);
		row.append(td6);
		row.append(td9);
		row.append(td7);
		row.append(td8);
		table1.append(row);
		//alert(row);
		//var container = $('#mingxi_tab'),
		//scrollTo = $(row);
		//container.scrollTop(
		//  scrollTo.offset().top - container.offset().top-20 + container.scrollTop()
		//);
			row_count++;
		 }
		
		} 
		function addNew() 
		{ 
		 var str="",strs="",direction ="",ti=0,lens=0;
		//for(var i=0;i<30;i++){
		// var a = new Array();
	
		 var t=tnum;
		// alert(car.topics[t].dir);
		// for(var t=0; t<car.topics.length;t++){
		 ti = parseInt(car.topics[t].dir);
				  if(ti>27 && ti<=72){
						
						direction="东北";
					}else if(ti>72 && ti<=117){
					
						direction="东";
					}
					else if(ti>117 && ti<=162){
						
						direction="东南";
					}
					else if(ti>162 && ti<=207){
						
						direction="南";
					}
					else if(ti>207 && ti<=252){
						
						direction="西南";
					}
					else if(ti>252 && ti<=297){
						
						direction="西";
					}
					else if(ti>297 && ti<=342){
						
						direction="西北";
					}
					else {
						
						direction="北";
					}
					
		lens=  len(car.topics[t].state);
		var titlestr = car.topics[t].state;
		if(lens>10){
			//strs= car.topics[t].state.substring(0, 9)+"...";
		}else{ 
			
		}
		strs=car.topics[t].state; 
					
		
		
		//alert("row"+row_count);
		/*a[0]="<tr id='row"+row_count+"' onDblClick='DblClick(\""+row_count+"\")'>"
		+"<td><b>"+row_count+"</b>"+"</td>"
		+"<td>"+car.topics[t].recvt+"</td>"
		+"<td>"+(car.topics[t].lat+"").substring(0,8)+"</td>"
		+"<td>"+(car.topics[t].lng+"").substring(0,8)+"</td>"
		+"<td>"+car.topics[t].veo.toFixed(1)+"</td>"
		+"<td>"+direction+"</td>"
		+"<td>"+strs+"</td>"
		+"<td>"+car.topics[t].posinfo+"</td>"
		+"</tr>";*/
		
		str="<tr id='row"+row_count+"' onDblClick='DblClick(\""+row_count+"\")'>"
		+"<td><b>"+row_count+"</b>"+"</td>"
		+"<td>"+car.topics[t].recvt+"</td>"
		+"<td>"+(car.topics[t].lat+"").substring(0,8)+"</td>"
		+"<td>"+(car.topics[t].lng+"").substring(0,8)+"</td>"
		+"<td>"+car.topics[t].veo.toFixed(1)+"</td>"
		+"<td>"+direction+"</td>"
		+"<td>"+car.topics[t].oil.toFixed(1)+"</td>"
		+"<td title="+titlestr+">"+strs+"</td>"
		+"<td>"+car.topics[t].posinfo+"</td>"
		+"</tr>";
		
		row_count++;
	// }
	// }
	//$('#table1').append(a.join(""));	
	$('#table1').append(str);
	//alert(str);
	//document.write(str);
	//document.getElementById("table1").innerHTML=str;
	//  document.getElementById('table1').innerHTML =  "<table><tbody>' + a.join("") + '</tbody></table>';
	//$("#table1").html(a.join(""));
	//str="";
} 

 	 function loadTime(){
		  var d = new Date();
		  var vYear = d.getFullYear();
		  var vMon = d.getMonth() + 1;
		  var vDay = d.getDate();
		  var start=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 00:00:00";
		  var end=vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " 23:59:59";
		  $("#start").val(start);
		  $("#end").val(end);
	 } 
	 
	 function len(s) { 
		var l = 0; 
		var a = s.split(""); 
		for (var i=0;i<a.length;i++) { 
		if (a[i].charCodeAt(0)<299) { 
		l++; 
		} else { 
		l+=2; 
		} 
		} 
		return l; 
	 }
    </script>
  <style type="text/css">
  html, body{height:100%; overflow:hidden;}
  html, body{width: auto; height: auto; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;} 
  .guiji_top{position: absolute; width:100%; height:60px; top:0px;}
  .guiji_title{font-size: 12px; height: 34px; text-align: center; background: #C5CFD6; border-bottom: 1px solid #999; line-height:31px;}
  .guiji_input{border: #999 1px solid; background:#fff; width:130px;}
  .guiji_link{width: 50px; height: 17px; line-height: 17px; float: right; margin-right: 10px; position: relative; top: 5px; cursor: pointer; background: #E1EBED; color:#07f;}
  .slider_bg{px;padding: 7px 10px; background: #D3DDE4; border-bottom: 1px solid #999999;}
  .sudu_main{background:#fff; height:198px; tex-align:center; border-bottom: 2px solid #A0B1C5;}
  .sudu_main{position: absolute; width:100%; top:60px;}
  .sudu_main h3{color: #3E576F; font-size:12px; text-align:center; font-weight:normal; margin:10px 0px;}
  #mingxi_main{width: 100%; position: absolute; top:60px;height: 198px; border-bottom: 2px solid #A0B1C5; overflow:auto;overflow-x: hidden;}
  #map{position: absolute; width:100%;height:100%; top:60px; bottom:0px;}
  #map{ height:auto;}
  /*--table--*/
  .playback{
	empty-cells: show;
	border-collapse: collapse;
	width: 100%;
	background: #fff;
	font-size:12px;
	border-spacing: 2px;
	border-color: gray;
	}
	.playback tr{
	background: #F0F0F0 url(<%=path%>/gpsonline/image/monitor/v3/bg_x.gif) repeat-x 0 -80px;	
	}
	.playback tr th{
		padding: 7px 5px;
		background: url(<%=path%>/gpsonline/image/monitor/v3/icons.gif) no-repeat 0 -49px;
		_background-color: #F0F0F0;
		font-weight: bold;
		line-height: 22px;
		white-space: nowrap;
		color: #676767;
		text-align: center;
	}
	.playback tr td{
		padding: 3px 5px;
		line-height: 20px;
		color: #676767;
		text-align:center
			
	}
	.playback tr:hover td {
		background-color: #A0B0C7;
		color: #fff;
	}
  </style>
  <script type="text/javascript">
	var mingxi =false;
	var sudu= false;
	var kaiguan=false;
	var loadmx = true;
	var loadsd = true;
	function sudu_open(){
		if(sudu==false){
			
			
			var mapid = document.getElementById("map");
			var sudu_main = document.getElementById("sudu_main");
			//var sudu_open = document.getElementById("sudu_open");
			//var sudu_close = document.getElementById("sudu_close");
			var clientheight= document.documentElement.clientHeight;
			sudu_main.style.display = "block";
			if(mingxi==false){
				mapid.style.top = "260px";
			}else{
				mapid.style.top = "460px";
				//mingxi_main.style.display="block";
				//alert(2)
				mingxi_main.style.top="260px"
			}
			sudu = true;
		}else{
			var sudu_main = document.getElementById("sudu_main");
			sudu_main.style.display = "none";
			//var clientheight= document.documentElement.clientHeight;
			var mapid = document.getElementById("map");
			//var mingxi_main = document.getElementById("mingxi_main");
			sudu= false;
			if(mingxi==false){
				mapid.style.top="60px";
			}else{
				mapid.style.top="260px";
				//alert(1)
				//mingxi_main.style.display="block";
				//alert(2)
				mingxi_main.style.top="60px"
			}
		}
	}
	function mingxi_open(){
		if(mingxi==false){
			
			var mapid = document.getElementById("map");
			var mingxi_main = document.getElementById("mingxi_main");
			var mingxi_open = document.getElementById("mingxi_open");
			//var clientheight= document.documentElement.clientHeight;
			//map.style.height = clientheight - 270+"px";
			mingxi_main.style.display = "block";
			mingxi=true;
			if(sudu==false){
				mapid.style.top="260px"
				google.maps.event.trigger(map,'resize');
			}else{
				mapid.style.top="460px";
				mingxi_main.style.top="260px"
				google.maps.event.trigger(map,'resize');
			}
		}else{
			var mapid = document.getElementById("map");
			var mingxi_main = document.getElementById("mingxi_main");
			//var mingxi_open = document.getElementById("mingxi_open");
			//var clientheight= document.documentElement.clientHeight;
			//map.style.height = clientheight;
			mingxi_main.style.display = "none";
			mingxi=false;
			if(sudu==false){
				mapid.style.top="60px";
				google.maps.event.trigger(map,'resize');
			}else{
				mapid.style.top="260px";
				mingxi_main.style.top="60px"
				google.maps.event.trigger(map,'resize');
			}
		}
	}
function getMousePercX(){ 
	if(car!=null){
		  $("#slider").mousemove(function(e){
		  	 if(car==null){
		  	 	return;
		  	 }
			  var x=e.pageX;//获取当前位置的X坐标
			  //计算鼠标位置占slider总体的百分比
			  var divX=document.getElementById("slider").getBoundingClientRect().left;
			  var divW=document.getElementById("slider").offsetWidth;
			  var perc1=(x-divX)/divW;
			 
			  if(perc1>0){
			  	//  alert(car.topics.length);
			  	 // alert(car.topics.length*perc1);
			  	  //alert(car.topics[parseInt(car.topics.length*perc1)].recvt);
			      document.getElementById("tip").innerHTML=car.topics[parseInt(car.topics.length*perc1)].recvt+" ";//显示百分比
			  }else{
				  document.getElementById("tip").innerHTML=car.topics[0].recvt+" ";//显示百分比
			  }
			  var temp=divW-x;//计算所余位置宽度
			  var tipDivW=document.getElementById("tip").offsetWidth;//获取tipDiv的宽度
			  var tipDivWH=tipDivW/2;//取tipDiv一半的
			  var leftM=divW-tipDivW;
			  if(tipDivWH>=x){
				  document.getElementById("tip").style.left=0+"px";//tipDiv最左时的左边距    
			  }else if(tipDivWH<x && temp>tipDivWH){
				  var leftMid=x-tipDivWH;
				  document.getElementById("tip").style.left=leftMid+"px";//tipDiv中段时的左边距
			  }else if(temp<=tipDivWH){
				  document.getElementById("tip").style.left=leftM+"px";//tipDiv最右时的左边距
			  }       
			  var divY=document.getElementById("slider").getBoundingClientRect().top;//获得sliderDiv顶部的Y坐标值
			  document.getElementById("tip").style.top=(divY-25)+"px";//tipDiv的上边距
			  document.getElementById("tip").style.display=""; //显示tipDiv
		  });
	 }
}
var timesType=0;
function cutovertimesType() {
 	 var  myselect=document.getElementById("selecttimesType");
	 var index=myselect.selectedIndex ;
	 timesType=myselect.options[index].value;
}
function cutovergjdata() {
 	 var  myselect=document.getElementById("selectgjdata");
	 var index=myselect.selectedIndex ;
	 dtype=myselect.options[index].value;
}
function hiddeDiv(){
	$(document).ready(function(){
		document.getElementById("tip").style.display="none";//鼠标移出slider区域，隐藏tipDiv
	})
}
function showShezhi(){
	var timeform = document.getElementById("timeform");
	var timeform2 = document.getElementById("timeform2");
	
	var clientheight= document.documentElement.clientHeight;

	var clientwidth= document.documentElement.clientWidth;
	
	
	timeform2.style.top = document.documentElement.clientHeight/2-$("#timeform2").height()/2+"px";
	timeform2.style.left = clientwidth/2-$("#timeform2").width()/2+"px";
	timeform.style.display = "block";
}
function hideShezhi(){
	var timeform = document.getElementById("timeform");
	timeform.style.display = "none";
}
</script>
  </head>
  
  <body oncontextmenu="return false" onload="closeMarkerPanel();">
  	
  	
  	
  	<div id="mingxi_main">
	 <table id="table1" class="table table-bordered" data-resizable-columns-id="demo-table-v2">
      <thead>
        <tr>
          <th data-resizable-column-id="a" style="width:60px;">序号</th>
          <th data-resizable-column-id="b" style="width:130px;">时间</th>
          <th data-resizable-column-id="c" style="width:100px;">经度</th>
          <th data-resizable-column-id="d" style="width:100px;">纬度</th>
          <th data-resizable-column-id="e" style="width:120px;">速度(公里/小时)</th>
          <th data-resizable-column-id="f" style="width:80px;">方向</th>
          <th data-resizable-column-id="g" style="width:80px;">油量</th>
          <th data-resizable-column-id="h" style="width:100px;">状态</th>
          <th data-resizable-column-id="k"  id="username-column">位置</th>
        </tr>
      </thead>
     <!--  <tbody>
        <tr>
          <td>1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td>Mark</td>
         
        </tr>
        <tr>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Larry the Bird</td>
          <td>@twitter</td>
          <td>@fat</td>
          <td>2</td>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
      </tbody>
       -->
    </table>
	</div>		
		<!--  <div style="position: absolute; width:100%; height:162px; top:36px; overflow:auto;" id="mingxi_tab">
		<table id="table1" border="0" class="playback" width="100%" > 
			<tbody> 
				<tr> 
					<td style="width:60px;"></td>
					<td style="width:130px;"></td> 
					<td style="width:100px;"></td>
					<td style="width:100px;"></td> 
					<td style="width:120px;"></td>
					<td style="width:80px;"></td> 
					<td style="width:100px;"></td>
					<td></td> 
				</tr> 
			</tbody> 
		</table> 
		</div>
		-->
  <div class="guiji_top" id="guiji_top">
		<div class="guiji_title">  
			<div style="float:left; margin-left:20px;">

			<span id="carname"></span>
			从:  
		    <input type="text" name="startTime" id="start" style="width: 150px; line-height:20px;" onkeydown="return false" onkeyup="return false" oncontextmenu="return false"
						class="Wdate"
						 onclick="WdatePicker({el:$dp.$('d12'),skin:'simple',dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'end\')}'})" />
		        至:
		    	<input type="text" name="endTime" id="end" style="width: 150px; line-height:20px;" onkeydown="return false" onkeyup="return false" oncontextmenu="return false"
						class="Wdate"
						 onclick="WdatePicker({el:$dp.$('d12'),skin:'simple',dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'start\')}'})" />
	          <input id="startplay" style="width: 70px;  height: 25px;  line-height: 25px;  background: #eee;  border: 1px solid #aaa;" type="button" onclick="play()" value="轨迹回放"/>
	        <!--<input id="startplay" type="button" onclick="stop()" value="停止回放"/>   -->  
				<span >
	       		  <input style="width: 70px;  height: 25px;  line-height: 25px;  background: #eee;  border: 1px solid #aaa;" id="f5" disabled="true" type="button" onclick="f5()"  value="结束回放"/>
	            </span>
	           速度:<span>慢</span>&nbsp;&nbsp;&nbsp;
	       </div>    
	       
	       
	       <div id="speed" style="width:100px; display:inline-block; float:left; margin-top:10px;"></div>
	   
	       <span style="float:left; margin-left:20px;">快</span>
	       
	      <!--<span style="float:left; margin-left:100px;">  轨迹数据：        
      			<input type="radio" name="gjdata" value="0" checked/>轨迹文件
      			<input type="radio" name="gjdata" value="1" />数据库</p>
          </span>  --> 
          
	
		
		  
		 
           <div style="float:right;">  
           	  <a href="javascript:showShezhi()" class="guiji_link" id="showShezhi">设置</a>
              <a href="javascript:mingxi_open()" class="guiji_link" id="mingxi_open">明细</a>	 
              <a href="javascript:sudu_open()" class="guiji_link" id="sudu_open">曲线图</a>               
		   </div>
	    </div>
	    <!--进度条-->
	    <div class="slider_bg" style="overflow:hidden">
	    	<div id="tip" style="display:none;height:17px; padding:0px 5px; color:#000; z-index:500; position:absolute;left:0px;border:1px solid #999; border-bottom:none; background-color:#D3DDE4;text-align:center;"></div>
	    	<div id="slider" onmouseover="getMousePercX()" onmouseout="hiddeDiv()" ></div>
	  	</div>
	  	<!--进度条 end--> 
	 </div>
	 
  	<div id="sudu_main" class="sudu_main" style="display:none">
  		<jsp:include page="/gpsonline/jsp/Curve.jsp" flush="true"/>
  	</div>
  	
	<div id="map">
		<jsp:include page="/gpsonline/jsp/BackMap.jsp" flush="true"/>
	</div>
	
<div id="mask" class="mask"></div>
 <div class="content" id="content">
      <img src="<%=path%>/gpsonline/image/monitor/loading.gif"></img>
      <div style="text-align:center; margin-top:10px;"><span id="loadingMsg"></span></div>
 </div>
 	<input type="hidden" value="<%=request.getParameter("mapType")%>" id="mapType" name="mapType"/>
  	<input type="hidden" value="<%=request.getParameter("carid")%>" id="carid" name="carid"/>
  	<input type="hidden" value="<%=request.getParameter("icon")%>" id="icon" name="icon"/>
  	<input type="hidden" value="<%=request.getParameter("carname")%>" id="carname" name="carname"/>
  	<input type="hidden" class="txt" id="uType" name="uType" value="<%=request.getParameter("uType")%>"/>
	<input type="hidden" class="txt" id="uName" name="uName" value="<%=uname%>"/>
	<input type="hidden" class="txt" id="uName2" name="uName2" value="<%=uname2%>"/>
	<input type="hidden" class="txt" id="uPass" name="uPass" value="<%=request.getParameter("uPwd")%>"/>
	<input type="hidden" value="<%=request.getParameter("startTime")%>" id="startTime" name="startTime"/>
  	<input type="hidden" value="<%=request.getParameter("endTime")%>" id="endTime" name="endTime"/>
  
  
       <!--标注-->
                    	<div class="marker_wrap" id="marker_wrap" style="${param.marker == 'hide' ? 'display:none;' : '' }">
                    		<!--open-->
                            <div class="marker_open" style="display: none;" id="biaozhu_open">
                            	<!--top-->
                                <div class="marker_open_top">
                                	<a class="marker_open_close" href="javascript:;" onclick="closeMarkerPanel();">
                                    	<span></span>
                                    </a>
                                    <div class="marker_title">
                                    	<a href="javascript:;" class="ico_marker"></a>
                                    	
                                    </div>
                                    <div class="marker_dot"></div>
                                </div>
                                <!--top end-->
                                
                                <div class="marker_main_bg"></div>
                                <div class="marker_main">
                                    <div class="marker_search marker_line">
                                        <!-- 标注搜索开始： -->
		                                <div class="searchcvs"><div class="ctnr">
											<div style="float:left;">
												<input value="请输入标注名称" style="width:160px;" name="markersearchinput" autocomplete="off" id="markersearchinput" class="searchinput" onfocus="markersearchFocus(this)" onblur="markersearchBlur(this)" type="text"/>
											</div>
											<div class="suggest" onmouseout="ismarkerSearchFocus = false;"  onclick="markerviewSearchListAll()"></div>
											<div style="clear:left;width:200px;">
												<div style="display: none;position: absolute;background: #FFF; width: 207px;height: 200px; margin-left: -10px; border: 1px solid #95BCF0; margin-top: 3px;overflow: auto;" id="markersearchListOutCanvas"><span>...</span></div>
											</div>
										    </div>
										    <!-- 标注搜索结束： -->
										</div>
                                    </div>
                                    <div id ="markerGroupTreeCanvas" style="width: 220px; height: 388px; overflow-y: auto;">
                                    <ul id="markerGroupTree" class="ztree"></ul>
                                    </div>
                                </div>
                                
                            </div>
                            <!--open end-->
                            
                            <!--close-->
                            <a class="marker_close" style="display: block;" href="javascript:;" onclick = "openMarkerPanel();" id="biaozhu_close">
                                <span></span>
                            </a>
                            <!--close end-->
                   		</div>
                        <!--标注 end-->
                        
                        
<div id="timeform"  style="font-size:12px;display:none;">
			<div style="width:100%; height:100%; background:#fff; position:absolute; z-index:800; top:0px; right:0px; bottom:0px; left:0px; filter:alpha(opacity=0.4); -moz-opacity:0.4; opacity: 0.4;"></div>
			<div id="timeform2" style="position: absolute; z-index: 900; top: 50px; left: 200px; border: 1px solid #bbb; background: #fff; width: 570px; height:177px;">
				<h3 style="height:35px; margin:0px; padding-right:10px; line-height:35px; padding-left:10px; background:#eee; border-bottom:1px solid #bbb; font-size:12px">
					
					<b>设置</b>
				</h3>
				<div style="line-height:30px; margin:10px;">
				
					
					<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
						<tr>
							<td width="120" align="right"> 轨迹数据：</td>
							<td>
							   <span style="float:left; margin-left:30px;">
						         <select id="selectgjdata" onchange="cutovergjdata()" style=" color: #C33;">
							 		 <option value="0" >轨迹文件</option>
							         <option value="1" selected>数据库</option>
								  </select>	
							  </span>
		  					</td>
							
							<td align="right">时间类型：</td>
							<td>
									  <span style="float:left; margin-left:30px;">
										       <select id="selecttimesType" onchange="cutovertimesType()" style=" color: #C33;">
											 		 <option value="0" selected>GPS时间</option>
											         <option value="1" >服务器时间</option>
												  </select>	
									</span>
							</td>
						</tr>
					
					
						<tr>
							<td width="120" align="right">显示无效定位点：</td>
							<td>
								  <span style="float:left; margin-left:30px;">
							     	 <input type="checkbox" id="ShowWuxiao" name="ShowWuxiao" onclick="ShowWuxiao();"/>
								  </span>
							</td>
							<td align="right">显示照片：</td>
							<td>
								 <span style="float:left; margin-left:30px;">
							     	 <input type="checkbox" id="ShowPhoto" name="ShowPhoto" onclick="ShowPhoto();"/>
								  </span>
							
							</td>
						</tr>
						<tr>
							<td width="120" align="right">显示所有停车点：</td>
							<td>
								  <span style="float:left; margin-left:30px;">
							     	 <input type="checkbox" id="ShowTingchedian" name="ShowTingchedian" onclick="ShowTingchedian();"/>
								  </span>
							</td>
							<td align="right"></td>
							<td>
								
							</td>
						</tr>
					</table>
					<div style="text-align:center; margin-top:5px; margin-bottom:10px;">
						<input type="button" value="确定" onclick="hideShezhi();" style="width:60px; height:25px;"/>
						
					</div>
					
				</div>
			</div>
</div>
  </body>
</html>
