Text doesn't fade into right position due to multiplication issue in javascript

Question

Hey all,

It's strange that the same functions are being called here but the #group3 text doesn't fade into the right position. I think it's a math issue:

    var triggerID = $active.attr("rel") - 1;  
    var image_reelPosition = triggerID * imageWidth; 
    //The first time the 'rel' attribute is 2 and the second time the rel attribute is 3. imageWidth is always 655

It's supposed to start at 0, and increment 655 pixels to the left (the paragraph start off hidden to the right) every time the rotate() function is called. It works fine the first time the rotate function is called (655 * (2 -1) = 655). However the second time it multiples rather than incrementing 655: 655 * (3-1) = 1310. I think that's the issue why #group3 never moves in left from where it is hidden on the right. And I know it's still hidden ion the right because I never see it fly by the visible area:

    $(".paging").show();  

$(".paging a:first").addClass("active");  

$("#group1 p:first").addClass("active");

$active = $('.paging a.active');

var imageWidth = $(".window").width();
var imageSum = $(".image_reel div").size(); 
var imageReelWidth = imageWidth * imageSum;


$(".image_reel p").css({
    'opacity': '0',
    'color': '#fff',
    'font-size': '1.5em'
});


$("#group1 p:first").animate({
    opacity: 1,
    left: 0
}, 800 );

$(".image_reel").css({'width' : imageReelWidth}); 

rotate = function(){

     clearInterval(playFade); 

    var triggerID = $active.attr("rel") - 1;  
    var image_reelPosition = triggerID * imageWidth; 

    $(".paging a").removeClass('active');  

    $active.addClass('active');  

    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

if($next.length === 0){
    $next = $(".image_reel img:first");  
} 

if($nextgraph.length === 0){
    $nextgraph = $(".image_reel p:first");
}

fadeImg(); 

rotateSwitch(); 

}; 

fadeImg = function(){

    $(".image_reel p").removeClass('active');
    $nextgraph.addClass('active');




    $(".image_reel img").animate({ 
        opacity: 0
    }, 500 );

    $next.animate({     
        opacity: 1
    }, 500 );

    var triggerID = $active.attr("rel") - 1;  
    var image_reelPosition = triggerID * imageWidth;

    $(".image_reel p").css({opacity: 0}).animate({  
        left: image_reelPosition + 500 
    }, 500 );


    $nextgraph.animate({
        opacity: 1,
        left: image_reelPosition
    }, 800 );
};

rotateSwitch = function(){

    playFade = setInterval(function(){  
        $active = $('.paging a.active');

        $next = $(".image_reel img.active").parent().next().find('img');  
        $nextgraph = $(".image_reel p.active").next(); 


            if(typeof $nextgraph.attr("class") == "undefined"){
                var parent = $(".image_reel p.active").parent();
                var nextparent = parent.next();
                $next = $("#" + nextparent.attr("id") + " img:first");
                $nextgraph = $("#" + nextparent.attr("id") + " p:first");
                $active = $('.paging a.active').next();
                rotate();
            }
            else {
                fadeImg();
            }

    }, 5000);
};

rotateSwitch();  

css:

.image_reel p.first {position: absolute; top: 0; left: 500px; z-index: 3;} 
.image_reel p.second {position: absolute; top: 0; left: 500px; z-index: 2;}
.image_reel p.third {position: absolute; top: 0; left: 500px; z-index: 1;}

.image_reel #group2 p.first {position: absolute; top: 0; left: 1155px; z-index: 3; }
.image_reel #group2 p.second {position: absolute; top: 0; left: 1155px; z-index: 2;}
.image_reel #group2 p.third {position: absolute; top: 0; left: 1155px; z-index: 1;}

.image_reel #group3 p.first {position: absolute; top: 0; left: 1810px; z-index: 3;}
.image_reel #group3 p.second {position: absolute; top: 0; left: 1810px; z-index: 2;}
.image_reel #group3 p.third {position: absolute; top: 0; left: 1810px; z-index: 1;}

Thanks for any response.