Value incorrectly always returns 1

[JohnMerlino]

Hey all,

I have four images:

		<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:

$(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();
});