Implemented "call to action" bar at bottom of Events page.

Resolves ticket #876977 (https://bugzilla.mozilla.org/show_bug.cgi?id=876977).

config/s3.js

@@ -13,6 +13,7 @@ module.exports = function () {
         throw new Error("Missing or incomplete S3 configuration.");
 
     s3_conf.prefix = s3_conf.local  || __dirname+'/../static/uploads';
+    s3_conf.local  = s3_conf.prefix;
     s3_conf.bucket = s3_conf.bucket || 'events.webmaker.org';
 
     return {

static/js/events/cta.js

@@ -0,0 +1,111 @@
+define(['jquery', 'jquery.carousel'], function($) {
+  'use strict';
+  // variables & setup
+  var $arrows = $('.cta-arrow'),
+      $body = $('body'),
+      isMobile = false,
+      page,
+      DEFAULT_FOOTER_ITEM_WIDTH = 245;
+
+  if ($body.find( '.mobile' ).css( 'display' ) === 'none') {
+    isMobile = true;
+  }
+
+
+var cta = [
+    {
+        title:  "Event Guides",
+        url:    "/guides",
+        image:  "http://lorempixel.com/75/75/",
+        desc:   "Step-by-step guides for event planning."
+    },
+    {
+        title:  "Maker Party",
+        url:    "/party",
+        image:  "http://lorempixel.com/75/75/",
+        desc:   "From now to September 15, join other webmakers in a global Maker Party."
+    },
+    {
+        title:  "Teach",
+        url:    "/teach",
+        image:  "http://lorempixel.com/75/75/",
+        desc:   "Resources for teaching digital literacy and webmaking."
+    },
+    {
+        title:  "Get Involved",
+        url:    "/getinvolved",
+        image:  "http://lorempixel.com/75/75/",
+        desc:   "Need help? Access support and connect with the Webmaker community."
+    },
+]
+
+  function attachToCTA(cta) {
+    var frag = document.createDocumentFragment();
+
+    if(cta.length > 4 && !isMobile) {
+      $arrows.show();
+    }
+
+    for(var i = 0; i < cta.length; ++i) {
+      var item = createCTA({
+        "title": cta[i].title,
+        "desc": cta[i].desc,
+        "image": cta[i].image,
+        "url": cta[i].url
+      });
+
+      $('.make-wrapper').append(item);
+    }
+
+    var carouOptions = {
+      height: 125,
+      items: {
+        visible: 4,
+        width: DEFAULT_FOOTER_ITEM_WIDTH
+      },
+      circular: false,
+      infinite: false,
+      scroll: { fx: 'directscroll', items: 1 },
+      auto: { play: false },
+      prev: { button: $('.c-leftarrow') },
+      next: { button: $('.c-rightarrow') }
+    };
+
+    if (!isMobile) {
+      $('.make-wrapper').carouFredSel(carouOptions);
+    }
+  }
+
+  function createCTA(itemObj){
+    var title = itemObj.title,
+    desc = itemObj.desc,
+    image = itemObj.image,
+    url = itemObj.url;
+
+    var $make_item_template = $('<div class="make-footer-item">');
+    var $div = $('<div class="make-footer-item-text">');
+
+    var $img = $('<img class="make-footer-item-img">');
+    $img.attr('src', image);
+
+    var $a = $('<a>');
+    $a.attr('href', url);
+
+    var $title_span = $('<span class="make-footer-item-title">');
+    $title_span.text(title);
+
+    var $desc_span = $('<span class="make-footer-item-desc">');
+    $desc_span.text(desc);
+
+    $div.append($title_span);
+    $div.append($desc_span);
+
+    $a.append($img);
+    $a.append($div);
+
+    $make_item_template.append($a);
+
+    return $make_item_template;
+  }
+  attachToCTA(cta);
+});

static/js/events/index.js

@@ -1,7 +1,7 @@
 require.config({
     deps: ['main', 'jquery.css3finalize', 'bootstrap-markdown',
             'jquery.timepicker', 'jquery-ui.custom', 'jquery.validate',
-            'additional-methods'],
+            'additional-methods', 'cta'],
     paths: {
         'html':                 '/js/html',
         'base':                 '/js/base',
@@ -16,6 +16,7 @@ require.config({
         'jquery.validate':      '/ext/js/jquery.validate',
         'additional-methods':   '/ext/js/additional-methods',
         'jquery.css3finalize':  '/ext/js/jquery.css3finalize-v3.x.min',
+        'jquery.carousel':      '/ext/js/jquery.carouFredSel-6.2.1',
 
         'oms':                  '/ext/js/oms',
         'infobubble':           '/ext/js/infobubble',
@@ -33,6 +34,7 @@ require.config({
         'bootstrap-markdown':   ['jquery', 'markdown', 'to-markdown'],
         'jquery.validate':      ['jquery'],
         'additional-methods':   ['jquery.validate'],
+        'jquery.carousel':      ['jquery'],
     },
     callback: function () {
         require(['jquery'], function ($) {