Kan ikke fange ny værdi i variabel (jQuery)

I følgende script forsøger at opdatere variablen activeElm så hver gang man klikker på den loader det nødvendige element og forsætter rotationen i scriptet fra hvor man er. Lige nu starter den forfra ved første frame hver gang man klikker på et element.

JQUERY:

 $(document).ready(function()
 {
     var activeElm = 0;
     var triggeredElm;
 
     var elmCount = $('#slider .element').length;
     var elmWidth = $('#slider .element').width();
     var inlineWidth = $('#slider .element').width() * elmCount;
     var rotateTimer = $.timer();
     
     $('#slider .inline').width(inlineWidth);
     
     
     
 
     var i = 0;
     $('#slider .element').each(function()
     {
         var left = (i * 20) + 'px';
         $('#slider').append('<div id="slideBtn_' + i + '" class="button" rel="' + i + '">' + (i + 1) + '</div>');
         $('#slideBtn_' + i).css({ 'left': left });
         i++;
     });
 
     $('#slider .button').click(function()
     {
         var thisPos = $(this).attr('rel');
         var clickLeft = '-' + (elmWidth * thisPos + 'px');
         $('#slider .inline').animate({ left: clickLeft }, 500);
         activeElm = thisPos;
     });
     
     
     
     rotate = function()
     {
         rotateTimer.set({
             action: function()
                 {
                     activeElm += 1;
                     if(activeElm >= elmCount)
                         { activeElm = 0; }
                     
                     var setLeft = '-' + (elmWidth * activeElm) + 'px';
                     $('#slider .inline').animate({ left: setLeft }, 500);
                 },
             time: 3000
         }).play();
     }
     
     rotate();
 });

HTML:

 <div id="slider">
     <div class="inline">
         <div rel="0" class="element">
             <h2>Alpha</h2>
             <p></p>
         </div>
         
         <div rel="1" class="element">
             <h2>Bravo</h2>
             <p></p>
         </div>
         
         <div rel="2" class="element">
             <h2>Charlie</h2>
             <p></p>
         </div>
         
         <div rel="3" class="element">
             <h2>Delta</h2>
             <p></p>
         </div>
     </div>
 </div>

Håber der er nogen der kan se en løsning på problemet.

Undskylder ligeledes den muligvis rodede kode er meget ny i jQuery.