(function($){
  $.fn.featureCarousel = function(trail){
    return this.each(function(){
      trail = !trail ? 0 : trail;

      featureCarousel.init($(this), trail);
    });
  };
})(jQuery);

var featureCarousel = {
  init: function(elem, trail) {
    var scope = this;
    scope.elem = $(elem);
    scope.elem.find("a:contains('View All ')").addClass('view_more');

    scope.structure(trail);
    scope.behavior();
  },
  structure: function(trail) {
    var scope = this;

    var items = scope.elem.find('li:not(.trailing)');
    var trailing = scope.elem.find('li.trailing');
    var carousel = items.slice(0, items.length - trail);
    var width = scope.elem.width();

    carousel.wrapAll('<li class="carousel"></li>').wrapAll('<ul></ul>');

    carousel.each(function(index){
      $(this).css({
        position: 'absolute',
        top: '0',
        left: $(this).parents('li.carousel').widthWithPadding() * index
      });
    });

    trailing.each(function(){
      // var p = $(this).find('p');
      // p.text(p.text().truncate(60));
      $(this).css('width',201);
    });

    $(trailing[trailing.length - 1]).css('margin',0);
    //trailing.first().css('margin-right', 20);

  },
  behavior: function() {
    var scope = this;

    var carousel = $(scope.elem).find('li.carousel');
    var ul = carousel.find('ul');
    $(carousel).everyTime(6000, function() {
      if($(carousel).find('a.active+a').length > 0) {
        scope.advance($(carousel).find('a.active+a'), ul, carousel);
      }
      else {
        scope.advance($(carousel).find('div.nav a')[0], ul, carousel);
      }
    });
    ul.css({
     position: 'absolute',
     top: 0,
     left: 0
    });

    var carousel_nav = $('<div></div>',{
      'class': 'nav'
    }).appendTo(carousel);

    if (carousel.find('li').size() > 1) {
      carousel.find('li').each(function(index){
        $('<a></a>',{
          text: index,
          css: {
            cursor: 'pointer'
          },
          click: function() {
            if($(this).hasClass('active')) {
              if(scope.state === 'play') {
                $(carousel).stopTime();
                scope.state = 'stop';
                scope.advance(this, ul, carousel);
              }
              else {
                $(carousel).everyTime(6000, function() {
                  if($(carousel).find('a.active+a').length > 0) {
                    scope.advance($(carousel).find('a.active+a'), ul, carousel);
                  }
                  else {
                    scope.advance($(carousel).find('div.nav a')[0], ul, carousel);
                  }
                });
                scope.state = 'play';
                scope.advance($(carousel).find('a.active+a'), ul, carousel);
              }
            }
            else {
              scope.advance(this, ul, carousel);
            }
          }
        }).appendTo(carousel_nav);
      });
    }

    carousel.find('div.nav a').first().addClass('active');

  },
  advance: function(link, ul, carousel) {
    $(link).parent('div').find('a').removeClass('active');
    $(link).addClass('active');
    ul.animate({
      left: -$(carousel).first().widthWithPadding() * $(link).text()
    });

  },

  state: 'play'
};

jQuery.fn.extend({
  widthWithPadding: function() {
    return $(this).width() + parseInt($(this).css("padding-left"), 10) + parseInt($(this).css("padding-right"), 10);
  }
});