(function(){    // <3
    'use strict';

    // This script averages Low and High daily temperatures as input by the user.
    // Global variables:
    var lowTemps = [];
    var highTemps = [];
    var dates = [];

    var lowSum = 0;
    var highSum = 0;
    var highest = 0;
    var lowest = 0;

    var highestMsg = '';
    var lowestMsg = '';

    // Function called when the form is submitted.
    // Function adds high and low temperatures to the global array.
    function addTemps() {
        // These get the input elements
        var highTemp = document.getElementById('highTemp').value;
        var lowTemp = document.getElementById('lowTemp').value;

        var output = document.getElementById('output');

         // For the output:
        var message = '';
        var error;

        if (isNaN(highTemp) || isNaN(lowTemp) || (highTemp < lowTemp)) {
            // ensures that both variables are NUMBERS
            error = "Please enter valid temperatures.";
        } else {
            // Add a new date!
            var today = new Date();
            today.setDate(today.getDate() - dates.length);
            dates.push(today);

            // Add the temps to the array only if they validate:
            highTemp = parseFloat(highTemp);
            lowTemp = parseFloat(lowTemp);

            if (highTemps.length == 0 || lowTemps.length == 0) {
                highest = highTemp;
                lowest = lowTemp;
                highestMsg = 'The highest temperature of ' + highest + ' occured on ' + formatDate(today);
                lowestMsg = 'The lowest temperature of ' + lowest + ' occured on ' + formatDate(today);
            }

            if (highTemp > highest) {
                highest = highTemp;
                highestMsg = 'The highest temperature of ' + highest + ' occured on ' + formatDate(today);
            }
            if (lowTemp < lowest) {
                lowest = lowTemp;
                lowestMsg = 'The lowest temperature of ' + lowest + ' occured on ' + formatDate(today);
            }

            highSum += highTemp;
            lowSum += lowTemp;

            highTemps.push(highTemp);
            lowTemps.push(lowTemp);

            // error still undefined because there was no error :)
        }

        // Update the page:
        message = '<table id="table"><th>Date</th><th>Low Temperatures</th><th>High Temperatures</th>';

        for (var i = 0; i < highTemps.length; i++) {
            var dateStr = formatDate(dates[i]);
            message += '<tr>' + '<td class="alt2">' + dateStr + '</td>' + '<td class="right">' + lowTemps[i] + '</td>' + '<td class="right">' + highTemps[i] + '</td>' + '</tr>';
        }

        // Now calculate averages and dump in the table
        message += '<tr>';
        if (error) {
            message += '<td colspan="3">' + error + '</td>';
        } else {
            message += '<td>Average:</td>' + '<td class="right">' + (lowSum / lowTemps.length).toFixed(1) + '</td>' + '<td class="right">' + (highSum / highTemps.length).toFixed(1) + '</td>';
        }
        message += '</tr>';

        // Display highest high and lowest low
        message += '<tr><td colspan="3">' + lowestMsg + '</td></tr>';
        message += '<tr><td colspan="3">' + highestMsg + '</td></tr>';

        // End table
        message += '</table>';

        // Display the table
        output.innerHTML = message;

        return false;
    }

    function formatDate(date) {
        return date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
    }

    function init() {
        'use strict';

        document.getElementById('temps').onsubmit = addTemps;
    }

    window.onload = init;

})();