var ContentRotator = function(options) {
  options = options || {};
  this.images = options.images || [];
  this.interval = options.interval || 15;
  this.index = options.index || 0;
  this.imageID = "";
  this.pagerClass = "";
  this.spinTimer = null;
};

ContentRotator.prototype = {

  contentClicked: function(event) {
    location.href = event.data.url;
  },
  
  spin : function(imgID, interval, pagerClass){
    var me = this;
    me.imageID = imgID;
    me.interval = interval;
    me.pagerClass = pagerClass;

    var imageEl = $("#"+imgID);
    
    if(imageEl.attr("src") == "") {
      me.displayCurrentImage();
    }
    
    me.spinTimer = setInterval( function() {

      me.displayCurrentImage();
      me.index += 1;
      if (me.index >= me.images.length) {
        me.index = 0;
      }
      
    }, (interval * 1000));
  },

  displayCurrentImage: function() {
    var me = this;
    var imageObj = me.images[me.index];
    var imageEl = $("#"+me.imageID);
    imageEl.attr("src", imageObj.imageUri);
    imageEl.unbind("click", me.contentClicked); // Remove the old click
    imageEl.removeClass("pointer");
    if (imageObj.url) {
      imageEl.bind("click", { url: imageObj.url }, me.contentClicked); // Assign the new click.
      imageEl.addClass("pointer");
    }
    me.setActive();
  },

  focus : function(i) {
    var index = i-1;
    var me = this;
    if (me.index !== index) {
      clearInterval(me.spinTimer);
      me.index = index;
      me.displayCurrentImage();
      me.spin(me.imageID, me.interval, me.pagerClass);
    }
  },

  setActive : function() {
      $('.' + myApp.revolver.pagerClass).removeClass('active');
      $('#' + myApp.revolver.pagerClass + '-' + (myApp.revolver.index + 1)).addClass('active');
  },

  getMarkup: function(crInstanceName) {
    if (!crInstanceName) return "<!-- No instance name provided for rotator markup. -->";
    var markup = [
      '<div class="rotator">',
      '  <ol>',
      '    <li id="rotator-content" class="rotator-main rounded">',
      '      <img id="rotator-image" src="" class="rotator-image rounded" />',
      '      <ul id="rotator-pager" class="horiz rotator-pager">',
      '        <li class="rotator-page active" id="rotator-page-1">&nbsp;</li>',
      '        <li class="rotator-page" id="rotator-page-2">&nbsp;</li>',
      '        <li class="rotator-page" id="rotator-page-3">&nbsp;</li>',
      '      </ul>',
      '    </li>',
      '    <li class="rotator-menu">',
      '     <ul id="rotator-menu-items">',
      '        <li class="rotator-item rounded" onclick="' + crInstanceName + '.focus(1);" id="rotator-item-1"></li>',
      '        <li class="rotator-item middle-rotator-item rounded" onclick="' + crInstanceName + '.focus(2);" id="rotator-item-2"></li>',
      '        <li class="rotator-item rounded" onclick="' + crInstanceName + '.focus(3);" id="rotator-item-3"></li>',
      '      </ul>',
      '    </li>',
      '  </ol>',
      '</div>'].join('\n');
    return markup;
  },

  render: function(container, crInstanceName) {
    container.append(this.getMarkup(crInstanceName));
  }
}; // end ContentRotator prototype