Drupal.behaviors.implementfrontPageRotator = function(context) {
  if (Drupal.settings.cycleSlider.frontPage) {
    Drupal.implementfrontPageRotator.attach(context);
  }
};

Drupal.implementfrontPageRotator = {
  // Set parameters
  'params' : {
    'target' : '#node-1016',
    'source' : 'slider-data',
    // Container
    'wrapper' : $('<div id="cycle-slider-custom"><ul id="controls" class="controls"></ul><div class="content"></div></div>'),
     // Fields -- NB: Unfortunately, it is very important that the background image be loaded first in the data!
    'title' : $('<a href="#"></a>').data('type', 'control'),
    'header' : $('<h2/>').data('type', 'header'),
    'body' : $('<p />'),
    'link' : $('<a href="#">Learn More >></a>').data('type', 'link'),
    'position' : $('<div/>').data('type', 'class'),
    'field_front_page_image_fid' : $('<div class="background" />').data('type', 'background')
  },
  'attach' : function (context) {
    // Attach preloader div
    $(this.params.target).prepend('<div class="pre-loader"></div>');
    // Kick the whole thing off.
    this.harvestData();
  },
  'harvestData' : function() {
    // Snag JSON -- proceed to the usual looping
    $.getJSON(this.params.source,
      function(data) {
        Drupal.implementfrontPageRotator.params.totalLength = data.nodes.length;
        $(data.nodes).each(
          function (i, val) {
            for (x in val.node) {
              // For each item in the datasoruce send the item #, element type, and actual data to the builder.
              Drupal.implementfrontPageRotator.formatData(i, x, val.node[x]);
            }
            if (i >= Drupal.implementfrontPageRotator.params.totalLength-1) {
              // If we have finished the last item implement the cycle plugin.
              Drupal.implementfrontPageRotator.constructCycle();
            }
          }
        );
      }
    );
  },
  'formatData' : function (i, field, data) {
    // Element building method -- get type and create new element
    var type = this.params[field].data('type');
    newElem = this.params[field].clone();
    // Depending on type do stuff
    if (type == 'background') {
      newElem.addClass('container-' + i);
      newElem.css('background-image', "url(" + data + ")");
      $('div.content', this.params.wrapper).append(newElem);
    }
    else if (type == 'control') {
      newElem.text(data);
      newElem = $('<li/>').append(newElem);
      $('ul.controls', this.params.wrapper).append(newElem);
    }
    else if (type == 'link') {
      $(newElem).attr('href', data);
      $('div.content div.container-' + i + ' p', this.params.wrapper).append(newElem);
    }
    else if (type == 'class') {
      $('div.content div.container-' + i, this.params.wrapper).addClass(data);
    }
    else if (type == 'header') {
      newElem.text(data);
      $('div.content div.container-' + i + ' p', this.params.wrapper).prepend(newElem);
    }
    else {
      newElem.text(data);
      $('div.content div.container-' + i, this.params.wrapper).append(newElem);
    }
  },
  'constructCycle' : function () {
    // Remove preloader
    $('div.pre-loader' ,this.params.target).remove();
    // Implement the cycle plugin
    $(this.params.target).prepend(this.params.wrapper); // append wrapper to target
    // Call cycle on the wrapper -- NB: pagerAnchorBuilder method is required for custom pager!
    $('#cycle-slider-custom .content', this.params.target).cycle(
      { 
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        timeout: 5000,
        pager:  '#controls',
        pagerAnchorBuilder: function(idx, slide) {
          // return selector string for existing anchor
          return '#controls li:eq(' + idx + ') a';
        }
      }
    );
    // Here is where the customization starts. It's all down hill from here.
    $('#cycle-slider-custom #controls li a', this.params.target).each(
      function() {
        if($(this).text().length > 17) {
          $(this).css('padding-top', '11px').height(44);
        }
      }
    );
  }
}