<html>
<head>
    <title>The Butty Run: Banbury, Coventry, Leamington, Warwick, Kenilworth Custom &amp; Hot Rod Cruise</title>
    <script>
        function OnLoad() {

            const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            var date = getNextFirstSunday();
            var nextMeetDate = document.getElementById("nextMeetDate");

            var dateString = date.getDate();
            switch (date.getDate()) {
                case 1:
                    dateString += "st";
                    break;
                case 2:
                    dateString += "nd";
                    break;
                case 3:
                    dateString += "rd";
                    break;
                default:
                    dateString += "th";
                    break;
            }

            dateString += " " + monthNames[date.getMonth()];
            dateString += " " + date.getFullYear();
            nextMeetDate.innerText = dateString;
        }

        function getNextFirstSunday() {
            var now = new Date();
            var firstSundayThisMonth = getFirstSunday(now.getFullYear(), now.getMonth())

            if (now <= firstSundayThisMonth.setHours(12))
                return firstSundayThisMonth;

            return getFirstSunday(now.getFullYear(), now.getMonth() + 1);

        }

        function getFirstSunday(year, month) {
            var first = new Date(year, month, 1);
            var firstSunday = first;

            if (first.getDay() != 0)
                firstSunday.setDate(first.getDate() + 7 - first.getDay());

            return firstSunday;
        }

    </script>
    <style>
        body {
            color: black;
            font-family: Arial, Garamond;
        }

        .nextMeeting {
            font-family: Arial, Garamond;
            text-align: center;
        }

        .bigLogoContainer {
            height: 80%;
        }

        .bigLogo {
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin-left: auto;
            margin-right: auto
        }

        .nextMeetingContainer {
        }

        .menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #342B62;
        }

        .menu li {
            float: left;
        }

        .menu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        .menu li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #04AA6D;
        }
    </style>
</head>
<body style="margin:0" onLoad="OnLoad();">
    <div style="max-height: 100%;">
        <div>
            <ul class="menu">
                <!--                <li><a href="#home">Home</a></li>
                    <li><a href="#news">What</a></li>
                    <li><a href="#news">Where</a></li>
                    <li><a href="#news">When</a></li>
                    <li><a href="#news">Gallery</a></li>
                    <li><a href="#contact">Other meets</a></li>-->
                <li style="float:right"><a href="http://www.facebook.com/buttyrun" target="_blank"><img src="images/facebook.jpg" /></a></li>
            </ul>
        </div>
        <div class="bigLogoContainer">
            <img class="bigLogo" src="images/background.jpg" />
        </div>
        <div class="nextMeetingContainer">
            <h2 class="nextMeeting">The next meeting will be at 9am on Sunday <span id="nextMeetDate"></span>.</h2>
        </div>
        <p style="text-align:center">New website coming soon...</p>
    </div>
</body>
</html>