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);
+};