code using mootools 1.4.1 causes an infinite loop

Question

I'm using mootools 1.4.1 and I'm trying to get a div that 'tweens' the width of the screen to fire another function on completion. However, the tween keeps firing and I don't believe that it's firing the function I'm wanting it to.

The code is below:

$('photo-loading_amt').set('tween', {duration: '1000ms',
                                     link: 'cancel',
                                     transition: 'linear',
                                     property: 'width',
                                     onComplete: function() {
                                                   var photoContainers = $$('.photo-container')

                                                   if (photoNum != photoContainers.length)  {
                                                       nextPhoto(photoNum.toInt() + 1);
                                                   }
                                                   else {
                                                       nextPhoto(1);
                                                   }    
                                                 }
                           });

Any Help that you might have would be appreciated.

@Dimitar Christoff, here's the code for the nextPhoto function:

function nextPhoto(photoNum)    {
resetTimeline();

var photoContainers = new Array();

photoContainers = $$('.photo-container');

var photoFx = new Fx.Tween(photoContainers[photoNum.toInt() - 1], {
                                duration: 'normal',
                                transition: Fx.Transitions.Sine.easeOut,
                                property: 'opacity',

                                onComplete: function() {
                                                            photoContainers[photoNum.toInt() - 1].setStyle('visibility', 'hidden');
                                                            photoContainers[photoNum.toInt() - 1].setStyle('opacity', 1);

                                                            if (photoNum == photoContainers.length) {
                                                                photoContainers[0].setStyle('z-index', photoContainers.length);
                                                            }
                                                        }
                            });

if (photoNum == photoContainers.length) {
    photoContainers[0].setStyle('z-index', 0);
}

photoFx.tween(1, 0);
//alert("photoNum = " + photoNum + "\n" + "photoContainers.length = " + photoContainers.length);
if (photoNum == photoContainers.length) {
    photoContainers[0].setStyle('visibility', 'visible');       
}
else    {
    photoContainers[photoNum.toInt()].setStyle('visibility', 'visible');
    //loadingPhotos(photoNum.toInt() + 1);
}
// hard reset the loadingPhotos function    

} // end of FUNCTION nextPhoto

Answer 1

Since I don't see an apparent loop in your code, I would suspect the effect to be caused by

link: 'cancel'

in your first block of code. According to the Moo docs this will:

'cancel' - Any calls made to start while the effect is running will take precedence over the currently running transition. The new transition will start immediately, canceling the one that is currently running.

So this might upset your tweens. However, you probably added this deliberately. I would try changing this to chain or ignore, both in your first and second tween setup, to see what combines best. If this doesn't solve it, perhaps you could post some more code. For instance, I don't see the code for the resetTimeline function. Perhaps your code gets stuck here.