Variable not defined in javascript
<p>I'm trying to use jCarousel and attempting to highlight current pagination buttons but it doesn't seem to recognise the variable <code>i</code> in Firebug no matter where I declare it.</p>

<pre><code>jQuery(document).ready(function() {
    jQuery('#right-carousel').jcarousel({
        start: 1, // Configuration goes here
        wrap: "circular",
        scroll: 1,
        auto: 3,
        vertical: true,
        itemFirstInCallback: {
            onBeforeAnimation: function(carousel, item, index, action, c, o, s, i ) {
                if (carousel_2) {
                    carousel_2[action]();
                }

                var i = 1;
                i = (i - 1) % jQuery('#right-carousel li').size();
                jQuery('.jcarousel-pagination a').addClass('inactive');
                jQuery('.jcarousel-pagination a:eq(' + i + ')').removeClass('inactive').addClass('active');

                jQuery('.jcarousel-pagination a').bind('click', function() {
                    carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('id')));
                    return false;
                }); 
            }
        }
    });
});
</code></pre>
