Add dynamic "next meetup" to home page

css/main.css

@@ -88,3 +88,8 @@ body{
 	border: 1px solid #555;
 }
 /* Jumbotron end */
+
+/* meetup-event for the home page */
+#meetup-event a {
+	color: white;
+}

index.html

@@ -6,6 +6,7 @@
         <h1>Welcome to techcorridor.io</h1>
         <p>TechCorridor.io is a developer group in Iowa City and Cedar Rapids, IA. If you’re interested in programming, the intertubes, and whatnot, this is the group for you.</p>
         <p><a class="btn btn-primary btn-lg" href="http://www.meetup.com/techcorridorio" role="button">Join us at one of our Meetups!</a></p>
+        <p id="meetup-event"></p>
     </div>
 </div>
 
@@ -28,3 +29,17 @@ <h2>Twitter</h2>
         </div>
     </div>
 </div>
+
+<script type="text/javascript">
+    //assume Mustache is loaded
+    //assume Meetup is loaded
+
+    window.onload = function(){
+        var meetupUrl = "https://api.meetup.com/2/events?callback=JSON_CALLBACK&offset=0&format=json&limited_events=False&group_urlname=techcorridorio&page=200&fields=&order=time&desc=false&status=upcoming&sig_id=168857872&sig=e659cc6038d27adf6eae600a44905c69196c77df";
+
+        new Meetup(meetupUrl).getEvents(function(data) {
+            var eventPresenter = EventPresenter(data.results[0]);
+            createEventParagraph(eventPresenter);
+        });
+    };
+</script>

js/meetup-events.js

@@ -36,3 +36,50 @@ var Meetup = function(meetupURL) {
 		});
 	};
 };
+
+var EventPresenter = function(event) {
+    var formatVenueLink = function(venue) {
+        return "http://maps.google.com/?q=" + encodeURI(venue.address_1) + '+' + encodeURI(venue.city);
+    };
+
+    var day = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    var months = [
+        "January", "February", "March", "April",
+        "May", "June", "July", "August",
+        "September", "October", "November", "December"
+    ];
+
+    var formatShortDate = function(date) {
+        // Pretty print the event date
+        return months[date.getMonth()] + ' ' + date.getDate();
+    };
+
+    var formatLongDate = function(date) {
+        // Pretty print the event date
+
+        return day[date.getDay()]  + ', '
+            + months[date.getMonth()] + ' '
+            + date.getDate() + ', '
+            + date.getFullYear()
+            + ' at '
+            + (date.getHours() % 12) + ':'
+            + (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes())
+            + ' '
+            + (date.getHours() < 12 ? 'AM' : 'PM');
+    };
+
+    var eventDate = new Date(event.time);
+
+    event.venueLink = formatVenueLink(event.venue);
+    event.formattedShortDate = formatShortDate(eventDate);
+    event.formattedLongDate = formatLongDate(eventDate);
+
+    return event;
+};
+
+var createEventParagraph = function (event) {
+    var template = "Next meetup: <a href='{{event_url}}' target='_blank'>{{name}} ({{formattedShortDate}})</a>";
+    Mustache.parse(template);   // optional, speeds up future uses
+    var rendered = Mustache.render(template, event);
+    $('#meetup-event').html(rendered);
+};