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

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String sstype= request.getParameter("type");
%>
<!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%>">
    <title></title>
    <link rel="Shortcut icon" href="<%=path%>/gpsonline/image/pic/logo.ico" type="image/x-icon"/> 
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height:100% ;overflow:hidden;}
      #container{height:100%}
</style>
    <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
    <!-- 
    <script type="text/javascript" src="http://ditu.google.cn/maps/api/js?sensor=false&libraries=drawing&key=AIzaSyDZis631eei5VArZqB-lP2DDOSgPrhLR5A"></script>
     -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&amp;ak=<%=MyApplicationContextUtil.map_baidu_key%>"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
    <script  charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=PDOBZ-YSJRS-U4WOK-6SFWT-LMMM2-TSFJP&libraries=convertor"></script>
    
    <script type="text/javascript" src="<%=path%>/gpsonline/js/baiduMap/baiduMapTrack.js"></script>
	<script type="text/javascript" src="<%=path%>/gpsonline/js/tool/tenmap.js"></script>
    <script type="text/javascript" src="<%=basePath%>gpsonline/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/MianMap/MianMap.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/google/google.js"></script>
    <script type="text/javascript" src="<%=path%>/gpsonline/js/gaode/gaode.js"></script>
<script type="text/javascript">
	function getScript(src){
			$("head").append("<script src='"+src+"'><\/script>");
	}	
   var trackkg;
   var jiejingkg=false;
   var map;
   var markersArray = [];
   var id;
   var carList;
   var x;
   var y;
   var series;
   var vehicle;
   var timestamp;
   var mapType=1;
   //var carid;
   var terCode;
   function chushihua(){
    	var sstype='<%=sstype%>';
	    if(sstype!="null"){
	     	$('#select').hide();
	    }
   		terCode = document.getElementById("terCode").value;
   		//console.info(terCode);
	   	initialize();
   }
   
   var isbol = false;
   function initialize(){
	   $.ajax({
	        type: "POST",
	        dataType: "json",
	        url: "json/reportsAction_getCarIdByTerCode.action",
	        data:{terCode:terCode},
	        success: function(data){
				console.info(JSON.stringify(data));
				if(data && data.flag){
					ciinit(data.id);
				}else{
					alert("该车不存在!");
				}
	        },
	        error:function(){}
	   });
    }

   function ciinit(carid){
	   $.ajax({
	        type: "POST",
	        dataType: "json",
	        async:false,
	        url: "json/vehicleAction_trackByids.action",
	        data:{ids:carid,t:1,timestamp:0},
	        success: function(data){
		      	if(data.flag==true){
			      	document.getElementById('position').innerHTML = "位置: " +data.data[0].positionLast.memo;
			      	if(isbol == false){
			      		isbol = true;
			      		countDown();
			      	}
			      	curve();
			      	timestamp= data.timestamp;
			      	carList=data;
			      	id=carid;
		      		if(mapType==1){
		      			document.getElementById("map_canvas").style.display="none";
						document.getElementById("container").style.display="block";
		      			baiduMap(carid);
		      		}
				 }
	        },
	        error:function(){}
	   });
   }

    function al(){
	    	$.ajax({
	        type: "POST",
	        dataType: "json",
	        async:false,
	        url: "json/vehicleAction_onlinevids.action",
	        data: {ids:id,t:1,timestamp:timestamp},
	        success: function(data){
		        console.info(JSON.stringify(data));
		      	if(data.flag==true){
		      		if(data.data.length>0){
			      		var s2 =data.data[0].recvtime.replace("-","/");
						s2=s2.replace("-","/");
						s2=s2.replace("T"," ");
						var newtime =(new Date(s2)).getTime();
		      			
		      			var chart = $('#container_qu').highcharts();
		      			
			            chart.series[0].addPoint([newtime+28809000,parseInt(data.data[0].speed)], true, false);
			            chart.series[1].addPoint([newtime+28809000,parseInt(data.data[0].temperature)], true, false);
			            chart.series[2].addPoint([newtime+28809000,parseInt(data.data[0].oilMN1)], true, false);
		    
		      			trackkg = true;
		      			timestamp = data.timestamp;
		      			//deleteOverlays();
		      		    carList.data[0].positionLast = data.data[0];
		      		       if(mapType==1){
		      		       		updateBaiduMap();
		      		       }
		      		}
				 }
			     x = carList.data[0].positionLast.recvtime;
			     y = carList.data[0].positionLast.speed;
	        },
	        error: function(){
	           
			}
	   });
    }
    function deleteOverlays(){
	    if (markersArray){
	      for (i in markersArray) {
	        markersArray[i].setMap(null);
	      }
	      markersArray.length = 0;
        }
    }
    function showOverlays() {
	    if (markersArray) {
		      for (i in markersArray) {
		        markersArray[i].setMap(map);
		      }
	    }
    }
    function addMarker(location,carname,icon){
	    marker = new google.maps.Marker({
	      position: location,
	      map: map,
	      icon:icon,
	      title:carname
	    });
	    markersArray.push(marker);
		return marker;
	 }
	function setPosition() {
	    if (markersArray) {
	      for (i in markersArray) {
	        markersArray[i].Position(null);
	      }
	    }
 	 }
	var num = 10;
    function countDown() {
        if (num >= 0) {
            var str = '';
            str = "<font color='red'>"+num+" </font>" + "秒后刷新 ";
            document.getElementById('autoDir').innerHTML = str;
            num--;
            setTimeout(countDown, 1000);
        }
        else{
           num = 10;
           al();
           countDown();
          
        }
    }  
</script>

<style type="text/css">
body{margin:0px; padding:0px; font-size:12px;}
.address{width: 420px; height: 20px; line-height: 20px; position: absolute; top: 0; z-index: 10; background: none repeat scroll 0 0 #F7F7F7; }
.address span{display:inline-block; float:left;}
.address .map_time{margin-left:5px; margin-right:15px;}
.open_sudu{white-space: nowrap; z-index: 12; cursor: pointer; position: absolute; top: 35px; right: 7px; width: 76px; background-color: #fff; color: #000; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main{background:#fff; height:200px; tex-align:center;}
.close_sudu{background-color: #8EA8E0; color: #fff; white-space: nowrap; z-index: 11; cursor: pointer; position: absolute; top: 35px; right: 7px; width: 76px; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main h3{color: #3E576F; font-size:12px; text-align:center; font-weight:normal; margin:10px 0px;}

.open_jiejing{white-space: nowrap; z-index: 12; cursor: pointer; position: absolute; top: 35px; right: 100px; width: 76px; background-color: #fff; color: #000; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main{background:#fff; height:200px; tex-align:center;}
.close_jiejing{background-color: #8EA8E0; color: #fff; white-space: nowrap; z-index: 11; cursor: pointer; position: absolute; top: 35px; right: 100px; width: 76px; padding: 2px 6px;
margin: 0; border: 1px solid #8BA4DC; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35); border-radius: 3px; text-align: center; display:block; text-decoration: none;}
.sudu_main h3{color: #3E576F; font-size:12px; text-align:center; font-weight:normal; margin:10px 0px;}
</style>
<script type="text/javascript">

	function open_sudu(){
		
		if(mapType==1){
			var map_canvas = document.getElementById("container");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var pano_container = document.getElementById("pano_container");
			var clientheight= document.body.clientHeight;
			//alert(clientheight);
			map_canvas.style.height = clientheight - 210+"px";
			pano_container.style.height = clientheight - 210+"px";
			sudu_main.style.display = "block";
			open_button.style.display ="none";
			close_button.style.dislpay="block";
		}
	}
	
	function close_sudu(){
		if(mapType==1){
			var map_canvas = document.getElementById("container");
			var sudu_main = document.getElementById("sudu_main");
			var open_button = document.getElementById("open_button");
			var close_button = document.getElementById("close_button");
			var clientheight= document.body.clientHeight;
			
			map_canvas.style.height = clientheight+"px";
			
			var pano_container = document.getElementById("pano_container");
			pano_container.style.height = clientheight+"px";

			sudu_main.style.display = "none";
			open_button.style.display ="block";
			close_button.style.dislpay="none";
		}
	}
	
	function open_jiejing(){
		jiejingkg=true;
		streeViewObject.pano = null;
		if(mapType==1 || mapType==3){
				var map_canvas = document.getElementById("container");
				var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
				
				
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth/2+"px";
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right = clientwidth/2 + 120 + "px";
				
				open_button.style.right = clientwidth/2 + 30 + "px";
				close_button.style.right = clientwidth/2 + 30 + "px";
				open_button2.style.right = clientwidth/2 + 130 + "px";
				close_button2.style.right = clientwidth/2 + 130 + "px";
				
				
				open_button2.style.display ="none";
				close_button2.style.dislpay="block";
				baidMap.addEventListener('resize', function(){
				    baidMap.setCenter(new BMap.Point(carList.data[0].positionLast.blng,carList.data[0].positionLast.blat));
				});
				streeViewObject.open(carList.data[0].positionLast.blat,carList.data[0].positionLast.blng,carList.data[0].positionLast.direct,3);
		}
	}
	function close_jiejing(){
		jiejingkg=false;
		if(mapType==1 || mapType==3){
			var map_canvas = document.getElementById("container");
				var open_button2 = document.getElementById("open_button2");
				var close_button2 = document.getElementById("close_button2");
				
				var open_button = document.getElementById("open_button");
				var close_button = document.getElementById("close_button");
			
				var clientwidth= document.body.clientWidth;
				map_canvas.style.width = clientwidth+"px";
				
				var map_qiehuan = document.getElementById("map_qiehuan");
				map_qiehuan.style.right =  170 + "px";
				open_button.style.right =  30 + "px";
				close_button.style.right =  30 + "px";
				open_button2.style.right =  130 + "px";
				close_button2.style.right =  130 + "px";
			
			open_button2.style.display ="block";
			close_button2.style.dislpay="none";
			baidMap.addEventListener('resize', function(){
				    baidMap.setCenter(new BMap.Point(carList.data[0].positionLast.blng,carList.data[0].positionLast.blat));
			});
			$("#pano_container").hide();
		}
	}
</script>
<style type="text/css">


.address{width: 420px; height: 20px; line-height: 20px; position: absolute; z-index: 10; background: none repeat scroll 0 0 #F7F7F7; }
.address span{display:inline-block; float:left;}
.address .map_time{margin-left:5px; margin-right:15px;}


/*--map 弹出框--*/
.map_tanchu_wrap p{
margin:0; 
padding:5px 10px; 
font-size:12px;
background:#fff;
}
.map_tanchu_wrap {
background: transparent; 
width:300px; 
margin:0 3px;
margin-left:100px;
box-shadow:0px 2px 2px #d9d7d4
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#fff; 
border-left:1px solid #c2c1be;
border-right:1px solid #c2c1be;
}
.xb1 {
margin:0 5px; 
background:#c2c1be;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #c2c1be; 
border-width:0 1px;  
height:auto;

}

span {
	_overflow: hidden;
}
.arrow {
	position: absolute;
	margin-top:-2px;
	margin-left:50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #ffffff transparent transparent transparent;
	z-index:20;
}
.arrow_bg{
	position: absolute;
	margin-top:-1px;
	margin-left:50px;
	width: 0;
	height: 0;
	font-size: 0;
	border-width: 12px;
	border-style: solid dashed dashed dashed;
	border-color: #c2c1be transparent transparent transparent;
	z-index:15;
}

</style>
 </head>
  <body onLoad="chushihua()">
  
  	<div style="display:none;position: absolute; top: 8px; z-index: 800; right: 170px;" id="map_qiehuan">
  		<select id="select" onchange="cutoverMap();" style=" color: #C33;">
	 		 <option value="1" selected>百度地图</option>
	         <option value="2" >谷歌地图</option>
	         <option value="3" >高德地图</option>
	 	</select>	
  	</div>
  	<!-- <input type="hidden" value="<%=request.getParameter("carid")%>" id="carid" name="carid"/> -->
  	<input type="hidden" value="<%=request.getParameter("terCode")%>" id="terCode" name="terCode"/>
  	<!-- <input type="hidden" value="<%=request.getParameter("mapType")%>" id="mapType" name="mapType"/> -->
  	<!-- message -->
  	<div class="address" style="width:auto;">
  		<span id="autoDir" class="map_time"></span>
  		<span id="position"></span>
  	</div>
  	<!-- message end-->

  	<!-- map -->
  	<div id="container" style="display:none;width: 100%"></div>
    <div id="map_canvas" style="width: 100%">
    
    </div>
    <div id="pano_container" style="position:absolute;width:50%;height:100%;display:none;right:0px;top:0px;background-color:#f7f8f9;">
    	<span id="pano_image" style="
		    position: absolute;
		    display:none;
		    position:absolute;
			top:50%;
			left:50%;
			margin:-120px 0 0 -235px;
			width:549px;
			height:237px;
			
			background-image:url('/mygpsonline/gpsonline/image/tool/no_jiejing.jpg');
			">
				 　　　<font color="#7d7d7d"　size="16">　<br><br><br>　　　　　　　　　　　　　抱歉，此处无街景</font>
		</span>	
		
    
    </div>
    <!-- map end -->
    
    <!-- 速度曲线  -->
    <a href="javascript:open_jiejing()" class="open_jiejing" id="open_button2">显示街景</a>
    <a href="javascript:close_jiejing()" class="close_jiejing" id="close_button2">隐藏街景</a>
    
    <a href="javascript:open_sudu()" class="open_sudu" id="open_button">查看速度曲线</a>
    <a href="javascript:close_sudu()" class="close_sudu" id="close_button">隐藏速度曲线</a>
    
    <div id="sudu_main" class="sudu_main" style="display:none">
    	<jsp:include page="/gpsonline/jsp/TrackCurve.jsp" flush="true"/>
    </div>
  
  </body>
</html>