problem with setInterval(); and clearInterval
<p>I have a problem involving setinterval. It's probably best to show an example so here's a link here:</p>

<p><a href="http://boudaki.com/testing/carouselTest" rel="nofollow">http://boudaki.com/testing/carouselTest</a></p>

<p>Basically I'm having problems making this work like I need it to. When the page loads the content rotates every three seconds and the numbered buttons on the right do so also. when you click on a button the buttons extend and the  animation is stopped - all good. Then when you click the little close button at the bottom of the buttons the animation resumes - all good....but then when you come to click on the numbered buttons again the animation keeps on going. Why?</p>

<p>There's rather a lot of code but the setIntervals and clear intervals are:</p>

<ul>
<li>line 69: on document.ready start the animation off -assign timerId to a global var</li>
<li>line 87: When the user clicks on the numbered button clearinterval in that animation</li>
<li>line 102: when the user clicks on the close button start the animation again</li>
</ul>

<p>That's it....I just don't get why it doesn't stop the animation the second time around??? Can anyone see why?</p>

<p>Any ideas?</p>
