<?php
$addon_path="";
include $addon_path."includes/config.php";
include $addon_path."includes/database.php";
include $addon_path."includes/keyword.php";
include $addon_path."includes/function.php";
include $addon_path."includes/session.php";
?>

<html>
<head>
<title><?php echo $sys_browser_title; ?></title>
<LINK REL="SHORTCUT ICON" HREF="images/logo.gif" >

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

        
<meta http-equiv=content-type content="text/html; charset=GB2312">
    
<LINK href="<?php print $addon_path."theme/desktop/".$cssPath1; ?>" rel=stylesheet media="(min-width: 641px)">
<LINK href="<?php print $addon_path."theme/desktop/".$cssPath2; ?>" rel=stylesheet media="(min-width: 641px)">
<LINK href="<?php print $addon_path."theme/desktop/".$cssPath3; ?>" rel=stylesheet media="(min-width: 641px)">
<LINK href="<?php print $addon_path."theme/desktop/".$cssPath4; ?>" rel=stylesheet media="(min-width: 641px)">
<LINK href="<?php print $addon_path."theme/desktop/".$cssPath5; ?>" rel=stylesheet media="(min-width: 641px)">

<LINK href="<?php print $addon_path."theme/mobile/".$cssPath1; ?>" rel=stylesheet media="(max-width: 640px)">
<LINK href="<?php print $addon_path."theme/mobile/".$cssPath2; ?>" rel=stylesheet media="(max-width: 640px)">
<LINK href="<?php print $addon_path."theme/mobile/".$cssPath3; ?>" rel=stylesheet media="(max-width: 640px)">
<LINK href="<?php print $addon_path."theme/mobile/".$cssPath4; ?>" rel=stylesheet media="(max-width: 640px)">
<LINK href="<?php print $addon_path."theme/mobile/".$cssPath5; ?>" rel=stylesheet media="(max-width: 640px)">


<LINK href="<?php print $addon_path.$fontPath; ?>" rel=stylesheet>
    
    
    
    
    

<script language="javascript" src="<?php print $addon_path.$jsPath2; ?>"></script>
<script language="javascript" src="<?php print $addon_path.$jsPath3; ?>"></script>
<script language="javascript" src="<?php print $addon_path.$jsPath4; ?>"></script>
<script language="javascript" src="<?php print $addon_path.$jsPath5; ?>"></script>
<script language="javascript" src="<?php print $addon_path.$jsPath6; ?>"></script>
   
</head>





<!-- calendar picker -->
<iframe width=174 height=189 name="gToday:normal:agenda.js" id="gToday:normal:agenda.js" src="plugin/calendar/date/ipopeng.php" scrolling="no" frameborder="0" style="visibility:visible; z-index:1999; position:absolute; top:-500px; left:-500px;">
</iframe>
<!-- calendar picker END -->


<!-- calendar time picker -->
<iframe width=188 height=166 name="gToday2:datetime:agenda.js:gfPop2:plugins_time.js" id="gToday2:datetime:agenda.js:gfPop2:plugins_time.js" src="plugin/calendar/time/ipopeng.php" scrolling="no" frameborder="0" style="visibility:visible; z-index:1999; position:absolute; top:-500px; left:-500px;">
</iframe>
<!-- calendar time picker END -->


<body onload="mon_on_load_init()" onbeforeunload="return false;" >
<style type="text/css">
#map
{
	  height: 100%;
}

#div_control_panel
{
	  
	  position:absolute;
	  height:450px;
	  top:50px;
	  width:300px;
	  left:10px;
	  
	  background:rgba(255,255,255,0.9);
	  box-shadow: 0px 0px 3px #ccc;
	  border-radius:2px;
	  z-index:1000;
	  text-align:left;
	  
	  padding:10px;
}
	  
	  
</style>
<table border="0" align=center cellspacing="0" cellpadding="0" width="100%" height="600" >

	
	<tr>
		<td valign=top >
			<div id='div_control_panel' >
				  
			</div>
			
			<div id="map"></div>
			<script type="text/javascript">
		
		
				  var start_longitude = 0;
				  var start_latitude = 0 ;
								
				  var polygons =[];
				  var selectedPolygon;
								
								
				  //var all_poly_bounds = new google.maps.LatLngBounds();				
								
				  function initialize()
				  {
					
						if(geo_position_js.init())
						{
							
							
							geo_position_js.getCurrentPosition(show_position,function(){},{enableHighAccuracy:true});
						}
						else
						{
							alert("Function not available");
						}
				  }
				
				
				
				
				
				  function show_position(p)
				  {
						 start_latitude=p.coords.latitude;
						 start_longitude=p.coords.longitude;
					  
						  //alert("Location Found: "+start_latitude);
				  }
		
				  var map;
				  var markers = [];
				  var walkingPath;
				  
				  var pathCoordinates = [];
				  
				  
				  
				  function initMap() {
					  map = new google.maps.Map(document.getElementById('map'), {
						center: {lat: 1.5308875834, lng: 110.3673123653},
						zoom: 10,
						styles: [{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]
					  });
				  }
					
					
					
					
				  
				  
				  
				  
				  
				  function mon_place_markers(vdata)
				  {
						
						var bounds = new google.maps.LatLngBounds();
						
						var vmarkers = JSON.parse(vdata);
							for (var i = 0; i < vmarkers.length; i++) {
							  
							  
									var infowindow = new google.maps.InfoWindow({
										  content: "Loading"
										});
							  
  
									var this_marker = vmarkers[i];
									var marker = new google.maps.Marker({
									  position: {lat: this_marker[1], lng: this_marker[2]},
									  map: map,
									  animation: google.maps.Animation.DROP,
									  title: this_marker[0],
									  label: " ",
									  
									
									});
									
									
									bounds.extend(marker.position);
									
									 marker.addListener('click', function() {
										  //infowindow.open(map, marker);
										  infowindow.setContent(this.title);
										  infowindow.open(map, this);

										  
										});
									
									
									
									
									
									markers.push(marker);
								  }
								  
								  
					
				
							  //now fit the map to the newly inclusive bounds
							  map.fitBounds(bounds);
								
											  
								  
								  
								  
				  }
					
					
				  function setMapOnAll(map)
				  {
						for (var i = 0; i < markers.length; i++) {
						  markers[i].setMap(map);
						}
				  }

				  function mon_clear_markers()
				  {
						
						try{
						 setMapOnAll(null);
						 markers = [];
						}catch(e)
						{
							  alert(e);
						}
				  }
				  function mon_remove_polyline() {
					  
					  try{
					   walkingPath.setMap(null);
					   pathCoordinates = [];
					  }catch(e)
					  {
						    //alert(e);
					  }
					  
					  
				    }
					
					
					function mon_on_load_init()
					{
						
						initialize();
						
						mon_send_get_lookup('map/location_transaction/index.php','','div_control_panel');
						
					}
		
				  //================================================================================================================
				  
				  
				  
				  var infoWindow_Rect;
				  var infoWindow_Rects =[];
				  
				  var rectangle;
				  var rectangles =[];
				  var selectedRectangle;
				  
				  var all_rec_bounds = new google.maps.LatLngBounds();
					
				  function mon_place_rectangles()
				  {
						all_rec_bounds=[];
						
						
							  var x = document.querySelectorAll("#checkpoint_node");
							  var i;
							  for (i = 0; i < x.length; i++) {
									
								vnorth = x[i].getAttribute("ne_lat")
								vsouth = x[i].getAttribute("sw_lat")
								veast = x[i].getAttribute("ne_lng")
								vwest = x[i].getAttribute("sw_lng")
									
								  //alert("X Element: ("+i+")" + x[i].getAttribute("ne_lat"));
								  
								  
								  
								  mon_draw_box(vnorth, vsouth, veast, vwest);
							  }
						
						
						map.fitBounds(all_rec_bounds);
						
						
						
				  }
					
				  function mon_draw_kpi_region_box(vnorth, vsouth, veast, vwest)
				  {
						
						var bounds = {
							  north: vnorth*1,
							  south: vsouth*1,
							  east: veast*1,
							  west: vwest*1
							};
			
						rectangle = new google.maps.Rectangle({
							  bounds: bounds,
							  editable: false,
							  fillColor: '#1ABC9C'
							});
						  
						rectangles.push(rectangle);
						rectangle.setMap(map);
				  			  
				  }
						
					
					
					
					
				   function mon_draw_box(vnorth, vsouth, veast, vwest)
					{
						
						
						//alert(vnorth + "," +vsouth +" ," +veast + ","+ vwest);
						
						//map.setCenter({lat: 1.5308875834, lng: 110.3673123653});
						var c = map.getCenter();
					
						var bounds = {
							  north: vnorth*1,
							  south: vsouth*1,
							  east: veast*1,
							  west: vwest*1
							};
						
						
						
						
						var pos1 = new google.maps.LatLng(parseFloat(vnorth*1), parseFloat(veast*1));
						//all_rec_bounds.extend(pos1);
						
						var pos2 = new google.maps.LatLng(parseFloat(vsouth*1), parseFloat(vwest*1));
						//all_rec_bounds.extend(pos2);
						
							
						//alert(vnorth + "," +vsouth +" ," +veast + ","+ vwest);
						
						
						 rectangle = new google.maps.Rectangle({
							  bounds: bounds,
							  editable: true,
							  clickable: true,
							  draggable: true,
							  fillColor: '#0011aa'
							});
						  
						  
						rectangles.push(rectangle);
						rectangle.setMap(map);
				  
				  
				  
				   // Add an event listener on the rectangle.
						//rectangle.addListener('bounds_changed', showNewRect());
						
						
						google.maps.event.addListener(rectangle, 'click', function() {
							  
							  
							  
							  selectRect(this);
							  
							  });
						
					  
						// Define an info window on the map.
						
						infoWindow_Rect = new google.maps.InfoWindow();
						infoWindow_Rects.push(infoWindow_Rect);
						
							  
					}
						
					
						
				  function mon_draw_new_box()
					{
						
						//map.setCenter({lat: 1.5308875834, lng: 110.3673123653});
						var c = map.getCenter();
						
						/*
						 var bounds = {
							  north: 1.5318875834,
							  south: 1.5308876834,
							  east: 110.3683123653,
							  west: 110.3673123753
							};
						*/
						
						var bounds = {
							  north: c.lat()+0.01,
							  south: c.lat()-0.01,
							  east: c.lng()+0.01,
							  west: c.lng()-0.01
							};
							
						
						
						 rectangle = new google.maps.Rectangle({
							  bounds: bounds,
							  editable: true,
							  clickable: true,
							  draggable: true,
							  fillColor: '#0011aa'
							});
						  
						  
						rectangles.push(rectangle);
						rectangle.setMap(map);
				  
				  
				  
				   // Add an event listener on the rectangle.
						//rectangle.addListener('bounds_changed', showNewRect());
						
						
						google.maps.event.addListener(rectangle, 'click', function() {
							  
							  
							  
							  selectRect(this);
							  
							  });
						
					  
						// Define an info window on the map.
						
						infoWindow_Rect = new google.maps.InfoWindow();
						infoWindow_Rects.push(infoWindow_Rect);
						
							  
					}
					
				  
				  function mon_undraw_box()
					{
						
						
						for (var i = 0; i < rectangles.length; i++) {
						  rectangles[i].setMap(null);
						  
						}
						
						
						for (var i = 0; i < infoWindow_Rects.length; i++) {
						  
						  infoWindow_Rects[i].close();
						}
						
						
						rectangles = [];
						infoWindow_Rects = [];
						
					}
					
					 function mon_get_all_box()
					{
						var ne;
						var sw;
						var all_point="";
						
						for (var i = 0; i < rectangles.length; i++) {
						  
							  ne = rectangles[i].getBounds().getNorthEast();
							  sw = rectangles[i].getBounds().getSouthWest();
							  
							  all_point=all_point + "" +ne.lat() + ',' + ne.lng() +";" +sw.lat() + ', ' + sw.lng() + "<@>";
							  
										  
						  
						}
						
						
						document.frm_enforcer_location.checkpoints.value=all_point;
						//alert(all_point);
					
						
					}
				  
				  
				  function showNewRect(event) {
						var ne = rectangle_this.getBounds().getNorthEast();
						var sw = rectangle_this.getBounds().getSouthWest();
					  
						var contentString = '<b>Rectangle moved.</b><br>' +
							'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
							'New south-west corner: ' + sw.lat() + ', ' + sw.lng();
					  
						// Set the info window's content and position.
						infoWindow_Rect.setContent(contentString);
						infoWindow_Rect.setPosition(ne);
					  
						infoWindow_Rect.open(map);
					  }
				  
				  
				  
				  function selectRect(obj) {
						
						
						if(confirm('Are you sure want to remove this Rectangle?'))
							  {
									var index = rectangles.indexOf(obj);
									rectangles.splice(index, 1);
									obj.setMap(null);
							  }
							  //obj.setOptions({strokeWeight: 2.0, fillColor: 'green'});
						
						
						
					  }
				  
				  //================================================================================================================	
				  
				   function mon_undraw_polygon()
					{
						
						for (var i = 0; i < polygons.length; i++) {
						  polygons[i].setMap(null);
						}
						polygons = [];
						
					}
				  
				  
				  
				  //var all_poly_bounds = new google.maps.LatLngBounds();
						
						function mon_draw_new_polygon()
						{
							  
							  
							  
							  var c = map.getCenter();
							  
							  /*
							   var bounds = {
									north: 1.5318875834,
									south: 1.5308876834,
									east: 110.3683123653,
									west: 110.3673123753
								  };
							  */
							  
							  var bounds = {
									north: c.lat()+0.01,
									south: c.lat()-0.01,
									east: c.lng()+0.01,
									west: c.lng()-0.01
								  };
								  
							  
										
							  var redCoords = [
										  {lat: c.lat(),  lng: c.lng()+0.01},
										  {lat: c.lat()+0.01, lng: c.lng()+0.01},
										  {lat: c.lat()+0.01, lng: c.lng()-0.01}
										];
									  
								
								
							  mon_draw_polygon(redCoords);
								
								
									  
									  
						
									  
						}
							  
						
						function mon_get_all_polygon()
						{	
						   
						   var all_point="";
						   
						   //alert(polygons.length);
						   
						   for (var i = 0; i < polygons.length; i++) {
							 
								 
								 
								 var vertices = polygons[i].getPath();
								 all_point += '<@>' + i +'|';
								 
								 for (var j =0; j < vertices.getLength(); j++) {
									   var xy = vertices.getAt(j);
								 
									   all_point += ''  + xy.lat() + ',' +xy.lng() + ';';
								 }
							 
							   
								 
								 //all_point=all_point + "" +ne.lat() + ',' + ne.lng() +";" +sw.lat() + ', ' + sw.lng() + "<@>";
								 
											 
							 
						   }
						   
						   
						   document.frm_route_boundary.polygons_coordinate.value=all_point;
						   //alert(all_point);
					   
						   
						}
				  	
						
						
						function mon_place_polygons()
						{
							  //all_poly_bounds=[];
							  
							  
							  //alert("Start");
							  
							  var redCoords =[];
							  
							  var x = document.querySelectorAll("#boundary_node");
							  
							  //alert("Total Polygon: "+x.length);
									var i;
									for (i = 0; i < x.length; i++)
									{
										  
										  //alert("Polygon:"+i);
										  
										  
										  redCoords=[];
										  
										  vpoly_data = x[i].getAttribute("p_data")
										  vpoly_id = x[i].getAttribute("p_id")
									  
										  //alert(vpoly_data);
										  var polypath = JSON.parse(vpoly_data);
										  //alert("Polygon JSON Parsed:"+i);
						
										  for (var j = 0; j < polypath.length; j++)
										  {
												
												
												var this_vertice = polypath[j];
												
												//alert("Vertice Info: "+this_vertice[0]+" , "+this_vertice[1]);
												
												
												var pos = new google.maps.LatLng(parseFloat(this_vertice[0]), parseFloat(this_vertice[1]));
												
												//alert("ParseFloat Info: "+this_vertice[0]+" , "+this_vertice[1]);
												
												redCoords.push(pos);
												
												//alert("Coordinate Added");
													  
										  }
										  
										
														  
											
										  mon_draw_polygon(redCoords);
									  
										  //alert("Finish Drawing");
										
									}
							  
							  
							  //map.fitBounds(all_rec_bounds);
							  
							  
							  
						}	
						
						
						 function mon_draw_polygon(redCoords)
						{
							
							
							//alert(redCoords);
							
							//map.setCenter({lat: 1.5308875834, lng: 110.3673123653});
							var c = map.getCenter();
						
						
									  
							  // Construct a draggable red triangle with geodesic set to true.
							  var  polygon = new google.maps.Polygon({
									  paths: redCoords,
									  strokeColor: '#FF0000',
									  strokeOpacity: 0.8,
									  strokeWeight: 2,
									  fillColor: '#FF0000',
									  editable: true,
									  clickable: true,
									  fillOpacity: 0.35,
									  draggable: true,
									  geodesic: true
									});
							  
							  //alert("Polygon Created");
							  
							polygons.push(polygon);
							polygon.setMap(map);
					  
					  
							  google.maps.event.addListener(polygon, 'click', function() {
							  
							  
							  
							  selectPolygon(this);
							  
							  });
						
						}
							
						
						
						function selectPolygon(obj)
						{
							  if(confirm('Are you sure want to remove this Region?'))
									{
										  var index = polygons.indexOf(obj);
										  polygons.splice(index, 1);
										  obj.setMap(null);
									}
									//obj.setOptions({strokeWeight: 2.0, fillColor: 'green'});
						}
				  
				  
				  
				  
				  
					//================================================================================================================	
						
					function mon_draw_new_line()
					{	
						
						
						var c = map.getCenter();
						var flightPlanCoordinates = [
									{lat: c.lat(),  lng: c.lng()},
									{lat: c.lat()+0.01, lng: c.lng()+0.01},
									{lat: c.lat()+0.01, lng: c.lng()+0.02}
								  ];
								  var flightPath = new google.maps.Polyline({
									path: flightPlanCoordinates,
									geodesic: true,
									strokeColor: '#FF0000',
									strokeOpacity: 1.0,
									strokeWeight: 2,
									draggable: true,
									editable: true
								  });
								  
								  flightPath.setMap(map);

								
								
					}	
					


			</script>
			<script async defer
			  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKvi6-8Jah6dX_6sNhUK8wHhkRVpclihw&callback=initMap">
			</script>
		
		</td>
	</tr>
	
</table>




<?php
include $addon_path."includes/end.php";
?>
