RotateSwitch Function - Value Incorrectly Always Returns One

I have four images:
Code:
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/1.png" alt="" /></a>
<a href="#"><img src="images/2.png" alt="" /></a>
<a href="#"><img src="images/3.png" alt="" /></a>
<a href="#"><img src="images/4.png" alt="" /></a>
</div></div>

When rotateSwitch() is called on launch, it assigns the second image to the $active variable (given that the first image was given active class in beginning of script). Then rotate() function is called and we get 1 (2-1) and then multiply by imageWidth. Now the second time the rotateSwitch() function is called, we should get 2 (3-1), but the alert still only returns 1 and the fourth time it only returns 1 as well:
Code:
$(document).ready(function(){
$(".paging").show();
$(".image_reel img:first").addClass('active');
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerId = $active.attr('src').substring(7,8);
var image_reelPosition = (triggerId - 1) * imageWidth;
alert('the value is ' + triggerId);
$(".image_reel img").removeClass("active");
$active.addClass("active");

$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $(".image_reel img.active").next();
if ($active.length === 0){
$active = $('.image_reel img:first');
}
rotate();
}, 7000);
};
rotateSwitch();
});