$.fn.createList = function() {
    var $puffs = $(this).find('.puff');
    var puffs = $puffs.length;
    var pages = parseInt(($puffs.length / 4));

    if (($puffs.length % 4) != 0) {
        pages++;
    }

    $(this).append("<ul></ul>");
    for (var i = 0; i < pages; i++) {
        $(this).find('ul').append("<li class=\"scrollitem\"></li>");
        $scroll = $('.scrollitem').last();
        for (var j = 0; j < 4; j++) {
            if (j == 2) {
                $scroll.append("<div class=\"clear\"></div>");
            }
            $scroll.append($(this).find('.puff').first());
            puffs--;
            if (puffs < 1) {
                break;
            }
        }
        $scroll.append("<div class=\"clear\"></div>");
    }
};


$.fn.slider = function() {
    var $slider = $(this).find('ul');
    var $items = $slider.find('li');
    $slider.wrap('<div class=\"wrapper\"></div>');

    var $wrapper = $(this).find('.wrapper');

    var singleWidth = 985; //$items.first().width();

    var currentPage = 0;
    var pages = $items.length;

    $wrapper.width(singleWidth);
    $wrapper.css('overflow', 'hidden');
    $wrapper.css('display', 'block');

    if ($items.length > 1) {
        $wrapper.before('<div class=\"remote\"><a href="#" class="arrow back">&laquo;</a> <a href="#" class="arrow forward">&raquo;</a></div>');
    }

    function gotoPage(page) {
        var dir = page < currentPage ? -1 : 1,
                    n = Math.abs(currentPage - page),
                    left = singleWidth * dir * n;

        if (page >= 0 && page < pages) {
            $wrapper.filter(':not(:animated)').animate({
                scrollLeft: '+=' + left
            }, 500, function() {
                currentPage = page;
            });
        }

        return false;
    }

    $(this).find('a.back', this).click(function() {
        return gotoPage(currentPage - 1);
    });

    $(this).find('a.forward').click(function() {
        return gotoPage(currentPage + 1);
    });
};