New to jQuery; How do I make this more general

New to jQuery; How do I make this more general

Hi all,

I took my first step into jQuery today and have been pleasently suprised. I've done a small script that takes some headlines from a news feed (which are just listed on the site), and made it so it fades between the headlines, and if you click an image below them, all are shown. Seems to work nicely!

Now this post is two fold:
1: please rip my code apart - I'm new so... where have I gone wrong, what could be better. I won't cry honest ;)
2: How can I make this more general. I'd like to have two or more boxes doing this simultaneously. At the moment I can only see how to do this by repeating the code.

  1. $(document).ready(function()
             {
                var itemShow = 0;
                var maxAmt = 4;
                var delayAmt = 4500;
                var shown = true; 
                var paused = false;
                var timerTwitter = {};
               
                $('.twitter .feedItem').each(function(i){if(i != 0)this.style.display = "none";});
               
                timerTwitter = $.timer(delayAmt, function ()
                {
                    $('.twitter .feedItem').each(function(i)
                        {
                            if(this.style.display != "none")
                                {$(this).fadeOut(1000, function(){$('.twitter .feedItem').each(function(o) {if(o == itemShow) {$(this).fadeIn(1000); shown=true;}})});}
                        }
                    );
                    if(shown){itemShow++; shown = false;}
                    if(itemShow >= maxAmt) itemShow = 0;
                });
               

    // Click on the expand image


                $('.twitter img.feedmore').click(function()
                    {
                        if(!paused)
                        {
                            $(this).attr('src',$(this).attr('src').replace(/([^.]*)\.(.*)/, "$1-less.$2"));
                            timerTwitter.stop();
                            $('.twitter .feedItem').each(function(n)
                            {
                                $(this).fadeIn(500);
                            });
                            paused = true;
                        }
                        else
                        {
                            $(this).attr('src',$(this).attr('src').replace('-less',''));
                            itemShow = 0;
                            $('.twitter .feedItem').each(function(l)
                            {
                                if(l != itemShow)
                                    $(this).fadeOut(500);
                            });
                            paused = false;
                            timerTwitter.reset(delayAmt);
                        }
                    });
               
            });






















































and the html will look something like:
  1. <div class="feed twitter">
    <a href="#" rel="external"><img src="images/twitter-feed-logo.gif" alt="twitter" /></a>

    <p class='feedItem'><a href='#' rel='external'>1 Blah</a></p>
    <p class='feedItem'><a href='#' rel='external'>2 Blah</a></p>
    <p class='feedItem'><a href='#' rel='external'>3 Blah</a></p>
    <p class='feedItem'><a href='#' rel='external'>4 Blah</a></p>

    <img src="images/feed-more.gif" alt="view more" class="feedmore"/>

    </div>










Thanks for any advice anyone can give me :)