<!DOCTYPE html>
<html>

<head>
    <title>Towed Car History </title>
    <style>
        h1 {
            font-family: Courier;
        }
        
        p {
            font-family: Times;
            font-size: 1.5em;
            line-height: 1.5em;
            margin-left: 24px;
        }
        
        pre {
            font-size: 2em;
        }
        
        div {
            margin: 4px;
            background-color: #EDEDED;
        }
        
        h3 {
            font-family: Georgia;
        }
        
        #html {
            border: 3px solid black;
            background-color: #87CEEB;
        }
        
        #map {
            height: 90%;
            width: 100%;
        }
        
        #body {
            background-color: #ffffff;
        }
        
        #iframe {
            height: 40%;
            width: 95%;
        }
    </style>

</head>

<body>
    <link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.css">
    <div id="html">
        <h1>Towed Car History By Address in Chicago</h1>
        <button id="submit">Reveal!</button>
    </div>
    <div id="results"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script>
        /*
                        This script retrieves the towed data information
                        from the City of Chicago Data Portal
                        
                        You are required to enter the information for your vehicle
                        as a license plate number
                    
                    */

        var towedVehicle;

        $(function() {

                $("#submit").click(function() {

                        var html = "";

                        // base URL to the food inspections data
                        var baseURL = 'https://data.cityofchicago.org/resource/rp42-fxjt.json';

                        // optional filters we're appending - date range and zip
                        var filters = "";

                        // full URL
                        var url = baseURL;

                        $.getJSON(url).done(function(data) {
                                // TODO:  add script to add data to the DOM
                                console.log(data);
                                // loop through the records

                                towedVehicle = data;

                                var date = towedVehicle[0].tow_date;

                                var doty = 0,
                                    sacra = 0,
                                    wack = 0,
                                    air = 0,
                                    pound = 0;


                                if (towedVehicle.length == 0) {
                                    html = "No Vehicle Found";
                                }
                                else {
                                    $.each(towedVehicle, function(index, value) {
                                        if (value.tow_date == date) {
                                            var spot = value.towed_to_address;
                                            if (spot == "10300 S. Doty")
                                                doty++;
                                            else if (spot == "701 N. Sacramento")
                                                sacra++;
                                            else if (spot == "400 E. Lower Wacker")
                                                wack++;
                                            else if (spot == "Chicago O'hare International Airport lot E.")
                                                air++;
                                            else(spot == "Police Pound");
                                            pound++;
                                        }

                                    }); // end of .each loop

                                    /*html = "<p>Black: " + blk + "<br>" +
                                            "White: " + whi + "<br>" +
                                            "Grey: " + gry + "<br>" +
                                            "Silver: " + sil + "<br>" +
                                            "Green: " + grn + "<br>" +
                                            "Blue: " + blu + "<br>" +
                                            "Red: " + red + "</p>";*/
                                    // Load the Visualization API and the corechart package.
                                    google.charts.load('current', {
                                        'packages': ['corechart']
                                    });

                                    // Set a callback to run when the Google Visualization API is loaded.
                                    google.charts.setOnLoadCallback(drawChart);

                                    // Callback that creates and populates a data table,
                                    // instantiates the pie chart, passes in the data and
                                    // draws it.
                                    function drawChart() {

                                        // Create the data table.
                                        var data = new google.visualization.DataTable();
                                        data.addColumn('string', 'Car tow address');
                                        data.addColumn('number', 'Quantity');
                                        data.addRows([
                                            ['10300 S. Doty', doty],
                                            ['701 N. Sacramento', sacra],
                                            ['400 E. Lower Wacker', wack],
                                            ["Chicago O'hare International Airport lot E.", air],
                                            ['Police Pound', pound]
                                        ]);

                                        // Set chart options
                                        var options = {
                                            'title': 'Towed cars by address on ' + date,
                                            'width': 400,
                                            'height': 300
                                        };

                                        // Instantiate and draw our chart, passing in some options.
                                        var chart = new google.visualization.PieChart(document.getElementById('results'));
                                        chart.draw(data, options);
                                    }
                                }

                                //$("#results").html(html);

                            }) // end of getJSON function

                    }) // end of click function

            }) // end of ready command
    </script>
</body>

</html>
