(function ()
{
  $.fn.carruselBlogs = function ()
  {
    function repeat(str, n)
    {
      return new Array( n + 1 ).join(str);
    }

    return this.each(function ()
    {
      // magic!
      var $wrapperBlog = $('> div', this).css('overflow', 'hidden'),
      $sliderBlog = $wrapperBlog.find('> ul').width(9999),
      $itemsBlog = $sliderBlog.find('> li'),
      $singleBlog = $itemsBlog.filter(':first')

      singleWidthBlog = $singleBlog.outerWidth(),
      visibleBlog = Math.ceil($wrapperBlog.innerWidth() / singleWidthBlog),
      currentPageBlog = 1,
      pagesBlog = Math.ceil($itemsBlog.length / visibleBlog);

      /* TASKS */

      // 1. pad the pages with empty element if required
      if ($itemsBlog.length % visibleBlog != 0)
      {
        // pad
        $sliderBlog.append(repeat('<li class="empty" />', visibleBlog - ($itemsBlog.length % visibleBlog)));
        $itemsBlog = $sliderBlog.find('> li');
      }

      // 2. create the carousel padding on left and right (cloned)
      $itemsBlog.filter(':first').before($itemsBlog.slice(-visibleBlog).clone().addClass('cloned'));
      $itemsBlog.filter(':last').after($itemsBlog.slice(0, visibleBlog).clone().addClass('cloned'));
      //$itemsBlog = $sliderBlog.find('> li');

      // 3. reset scroll
      $wrapperBlog.scrollLeft(singleWidthBlog * visibleBlog);

      // 4. paging function
      function gotoPage(page)
      {
        var dir = page < currentPageBlog ? -1 : 1,
        n = Math.abs(currentPageBlog - page),
        left = singleWidthBlog * dir * visibleBlog * n;

        $wrapperBlog.filter(':not(:animated)').animate({
                    scrollLeft : '+=' + left
                }, 20000, function () {
                    // if page == last page - then reset position
                    if (page > pagesBlog) {
                        $wrapperBlog.scrollLeft(singleWidthBlog * visibleBlog);
                        page = 1;
                    } else if (page == 0) {
                        page = pagesBlog;
                        $wrapperBlog.scrollLeft(singleWidthBlog * visibleBlog * pagesBlog);
                    }

                    currentPageBlog = page;
                });
      }

      // 5. insert the back and forward link
      //$wrapperBlog.after('<a href="#" class="arrow back">&lt;</a><a href="#" class="arrow forward">&gt;</a>');

      // 6. bind the back and forward links
      //$('a.back', this).click(function ()
      //{
      //  gotoPage(currentPageBlog - 1);
      //  return false;
      //});

      //$('a.forward', this).click(function ()
      //{
      //  gotoPage(currentPageBlog + 1);
      //  return false;
      //});

      //$(this).bind('goto', function (event, page)
      //{
      //  gotoPage(page);
      //});

      // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
      $(this).bind('next', function ()
      {
        gotoPage(currentPageBlog + 1);
      });
    });
  };
})(jQuery);