var HEIGHT = 25; 
	var numberOfThem = 3;
    var clipRing = new Array();
    var inMotion = false;
$(document).ready(function() {
    var i = 0;
    $('#weatherWidget .weather').each( function ()
        {
            $(this).css({top: (i * HEIGHT) + 'px'});
            clipRing[clipRing.length]=this;
            i++;
        });
    
    
    function canvasNext()
    {
        var canvas=$('#weatherSpinner');
        var top = parseInt(canvas.css('top'));
        
        if(inMotion)
        {
            return;
        }
        
        inMotion = true;
        
        canvas.animate({top: (top - HEIGHT) + 'px'}, {
            duration: 800, 
            complete: function () {
                //Set the top of the 1st item to be after the last item
                var top = clipRing.shift();
                var bottom = clipRing[clipRing.length - 1];
                var bottomPos = parseInt($(bottom).css('top'));
                $(top).css('top', (bottomPos + HEIGHT) + 'px');
                clipRing.push(top);
                inMotion = false;
            }
        } );
        
        return false;    
    }
    
    
    $('.canvas').data('timer', setInterval(canvasNext, 7000));
   
});