<?php
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
$map_data = unserialize(base64_decode($_GET['map_data']));
$lat = floatval($map_data['lat']);
$lng = floatval($map_data['lng']);
$zoom = $map_data['zoom'];
$o_lat = $lat - 0.001;
$o_lng = $lng - 0.001;

?>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            font-size: 11px;
            color: #333333;
            height: 100% !important;
        }

        .col-map {
            margin: 0 !important;
            padding: 0 !important;
            height: 100%;
        }

        .col-map-info {
            padding: 0 4px !important;
        }


        #map_canvas {
            height: 100%;
        }


        .adp-summary {
            font-weight: bold;
            color: #0000FF;

        }


        #total_dist {
            border-bottom: 1px solid #000000;
            /* /* border-right: 1px solid #000000; */ */
        padding:3px;
            font-size: 12px;
            clear: both;
        }


        #back_link {
            border-bottom: 1px solid #000000;
            /* border-right: 1px solid #000000; */
            text-align: center;
            padding: 10px 0;
        }

        .map_back_link {
            background: #f8ffe8;
            background: -moz-linear-gradient(top,  #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d));
            background: -webkit-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
            background: -o-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
            background: -ms-linear-gradient(top,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
            background: linear-gradient(to bottom,  #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 );

            -webkit-box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.9);
            -moz-box-shadow:    2px 2px 4px rgba(50, 50, 50, 0.9);
            box-shadow:         2px 2px 4px rgba(50, 50, 50, 0.9);


            display: block;
            margin: 10px auto;
            width: 160px;
            height: 30px;

            border: 1px solid #B7DF2F;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            padding: 14px 0 0 0;
        }

        #address {
            margin: 0;
            padding: 4px 4px;
            font-size: 13px;
            line-height: 16px;
        }

        @media print {
            html, body {
                height: auto;
            }

            #map_canvas {
                height: 650px;
            }
        }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDxpjfVxlLazmPt1gkiw_wIy55ofWAUJvY"></script>
<script type="text/javascript">

	var rendererOptions = {
		//draggable: true,
		preserveViewport: true,
		suppressMarkers : true
	
	};
	var directionsDisplay, directionsService;
	var map;
	
	var map_location, user_location;
	var pp = {};

	
	
	function initialize() {
		pp = {
			'origin' : [<?php echo $o_lat;?>, <?php echo $o_lng;?>],
			'dest' : [<?php echo $lat;?>, <?php echo $lng;?>]
		};
		
		
		
		map_location = new google.maps.LatLng(parseFloat('<?php echo $lat;?>'), parseFloat('<?php echo $lng;?>'));
		user_location = new google.maps.LatLng(parseFloat('<?php echo $o_lat;?>'), parseFloat('<?php echo $o_lng;?>'));
		
		var myOptions = {
			zoom: 14,
			mapTypeId: google.maps.MapTypeId.HYBRID,
			center: new google.maps.LatLng(pp.dest[0], pp.dest[1]),
			draggable: true,
            scrollwheel: false
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		
		// Creating a marker and positioning it on the map
		

		var dest_marker = new google.maps.Marker({
			position: new google.maps.LatLng(pp.dest[0], pp.dest[1]),
			icon: '<?php echo $protocol . $_SERVER['HTTP_HOST'] . "/$modules_dir_name";?>/main_article/res/markers/directions_finish.png',
			map: map,
			draggable: false
		});
		
		var orig_marker = new google.maps.Marker({
			position: new google.maps.LatLng(pp.origin[0], pp.origin[1]),
			icon: '<?php echo $protocol . $_SERVER['HTTP_HOST'] . "/$modules_dir_name";?>/main_article/res/markers/directions_start_blue.png',
			map: map,
			draggable: true
		});
		
		directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
		directionsService = new google.maps.DirectionsService();
		
		google.maps.event.addListener(orig_marker, "dragend", function() {
			var point = orig_marker.getPosition();
			map.panTo(point);

			user_location = point;
			calcRoute();
		});
		
		
		directionsDisplay.setMap(map);
		directionsDisplay.setPanel(document.getElementById("directionsPanel"));
		
		google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
			computeTotalDistance(directionsDisplay.directions);
		});
		
		google.maps.event.trigger(map, 'resize');
		
		//calcRoute();
		
		
	}

	function calcRoute() {
	
		var request = {
			origin: user_location,
			destination: map_location,
			provideRouteAlternatives: false,
			//waypoints:[{location: "Bourke, NSW"}, {location: "Broken Hill, NSW"}],
			travelMode: google.maps.DirectionsTravelMode.DRIVING
		};
		directionsService.route(request, function(response, status) {
			if (status == google.maps.DirectionsStatus.OK) {
				directionsDisplay.setDirections(response);
			}
		});
	}

	function computeTotalDistance(result) {
		var total = 0;
		var myroute = result.routes[0];
		for (i = 0; i < myroute.legs.length; i++) {
			total += myroute.legs[i].distance.value;
		}
		total = total / 1000;
		document.getElementById("total").innerHTML = total + " km";
	}   
</script>
</head>
<body onload="initialize()">

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-map col-map-map">
            <div id="map_canvas_container">
                <div id="map_canvas"></div>
            </div>
        </div>
        <div class="col-md-4 col-map col-map-info">
            <div id="directions_res">
                <div id="total_dist"><strong><?php echo "Total Distance";?></strong>: <span id="total">TBD</span></div>
                <div style="margin: 0; padding: 4px 0px;">
                    <div id="help" style="overflow:hidden;">
                        <?php
                        $start_marker = '<img src="' . $protocol.$_SERVER['HTTP_HOST'] . "/$modules_dir_name".'/main_article/res/markers/directions_start_blue.png' . '" border="0" style="float: left; margin: 0px 3px 3px 0px; clear: both;">';
                        $end_marker = '<img src="' . $protocol.$_SERVER['HTTP_HOST'] . "/$modules_dir_name" . '/main_article/res/markers/directions_finish.png' . '" border="0" style="float: left; margin: 0px 3px 3px 0px; clear: both;">';
                        ?>
                        <p><?php echo $end_marker;?><?php echo "The red marker represents the location on the map.";?></p>
                        <p><?php echo $start_marker;?><?php echo "Please drag the blue marker (on the map) to your desired starting point in order to get driving directions from your desired location.";?></p>
                    </div>
                </div>
                <div id="directionsPanel" style="overflow-y: auto;"></div>
            </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>