/* PROMO SLIDER: fade transition uses $.cycle */
$(function () {
  // helper: promo background can be a #hex or a /path/to/an/image. 
  Handlebars.registerHelper('promoBG', function (str) {
    if (!str.match('#')) {
      str = "url(" + str + ")";
    }
    return str;
  });
  // take the data and run it through the template
  var source = $("#promo-template").html();
  var template = Handlebars.compile(source);
  var markup = template(json);
  $('#main-promos .slides').html(markup);
  // add the Pager element to the display
  $("<p class=pager />").appendTo("#main-promos");
  // make sure all the images are loaded before kicking off the carousel
  $('#main-promos .slides').imagesLoaded(function ($images) {
    $('#main-promos').addClass('loaded');
    $(this).cycle({
      fx: 'fade',
      speedIn: 1500,
      speedOut: 1000,
      timeout: 8000,
      delay: 1000,
      containerResize: false,
      slideResize: false,
      pause: true,
      pauseOnPagerHover: true,
     //easing: "easeInOutCubic",
      pager: "#main-promos .pager",
      activePagerClass: "selected",
      // callback fn that creates a thumbnail to use as pager anchor 
      pagerAnchorBuilder: function (idx, slide) {
        var obj = json.promos[idx];
        return '<img src="' + obj.thumb + '" title="' + obj.info.heading.text + '">';
      }
    });
    $('#main-promos > *').fadeIn();
  });
});