Get index of unordered list and scroll position (up and down) on click
<p>I have a schedule of events, the ul has a fixed height and overflow hidden, the li's also have a fixed height. Only four are visible at a time. I need to figure out how to scroll through the list, both up and down on click of the appropriate button. </p>

<p>I'm sure there are plug ins out there that can do this, but for a better understanding of jQuery/JS I want to do this on my own - but need some help. HTML/CSS is here <a href="http://jsfiddle.net/DirtyBirdDesign/BJdJ7/" rel="nofollow">http://jsfiddle.net/DirtyBirdDesign/BJdJ7/</a></p>

<p>I have broken this down into the following needs:</p>

<ol>
<li>Loop through and index the number of list items</li>
<li>Get the current position</li>
<li>on each click of the 'down' button, move the position -41px</li>
<li>on each click of the 'up' button, move the position +41px</li>
<li>animate the transition</li>
<li>Loop continuously - go from last to first when last is visible</li>
</ol>

<p>Am I missing anything on the above? How do I go about this?
thanks for the knowledge!</p>
