<?php
/*************************************************************
 * This block of code is here to enable source display.
 * This is because this is demonstration code.
 * This would normally never be included in production code.
 */
if (isset($_REQUEST['show_source'])) {
    show_source(__FILE__);
    exit ;
}
/*************************************************************
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Maps</title>

        <!-- Bootstrap http://getbootstrap.com/-->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <script type="text/javascript" src="js/jQuery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            function loadDirections() {
                $('#directions').html("");
                $('html, body').css("cursor", "wait");
                $.get('directions.php', {
                    origin : $('#origin').val(),
                    destination : $('#destination').val(),
                    mode : $("input[name=mode]:checked").val()
                }, function(data) {
                    $('#directions').html(data);
                    $('html, body').css("cursor", "auto");
                });
            }
        </script>
        <style type="text/css">
            .scrollabletextbox {
                height: 500px;
                font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
                font-size: 82%;
                overflow: scroll;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form onsubmit="loadDirections(); return false;" name="dirform" id="dirform">
                <div class="row voffset2">
                    <div class="col-md-4"></div>
                    <div class="col-md-1">
                        <label>Origin:</label>
                    </div>
                    <div class="col-md-3">
                        <input name="origin" id="origin">
                    </div>
                    <!--                    <div class="col-md-1"></div> -->
                    <div class="col-md-4">
                        <a href="source.htm" target="_blank"><mark><strong>View The Source Files For This App</strong></mark></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-1">
                        <label>Destination:</label>
                    </div>
                    <div class="col-md-3">
                        <input name="destination" id="destination">
                    </div>
                    <div class="col-md-4"></div>
                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-1">
                        <label>Mode:</label>
                        <!-- driving walking bicycling transit -->
                    </div>
                    <div class="col-md-5">
                        <input type="radio" name="mode" value="driving" checked="checked">
                        Driving
                        <input type="radio" name="mode" value="walking">
                        Walking
                        <input type="radio" name="mode" value="bicycling">
                        Bicycling
                        <input type="radio" name="mode" value="transit">
                        Transit
                    </div>
                    <div class="col-md-3"></div>
                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-2">
                        <input type = "Submit">
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-4"></div>
                </div>
            </form>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div id="directions" class="scrollabletextbox"></div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </body>
</html>