function rolloverInitialize ( betweenSwaps, transitionSpeed )
{
    $(function(){
        var this_canvas_id = 1;
        $('.rollover-canvas').each(function(){
            $(this).attr('id','rolloverCanvas'+this_canvas_id);
            this_canvas_id ++;
            $(this).css('display','block' );
            $(this).css('padding','0px' );
            $(this).children('img').load(function(){
                $(this).parent().css('width',$(this).width() );
                $(this).parent().css('height',$(this).height() );
            });
            rolloverPreloadImages ( $(this).attr('id'), betweenSwaps, transitionSpeed );
        });
    });
}
function rolloverPreloadImages ( canvasId, betweenSwaps, transitionSpeed )
{
    $(function(){
        var imageList = [];
        imageList[0] = $('#'+canvasId+' img').attr('src');
        var currentImageNo = 1;
        $('#'+canvasId+' input').each (function(){
            var this_image = new Image();
            this_image.src = $(this).val();
            imageList[currentImageNo] = $(this).val();
            currentImageNo ++;
        });

        setTimeout ( function(){rolloverStepTransition(''+canvasId, 'out', 1, imageList, betweenSwaps, transitionSpeed ); }, betweenSwaps );
    });
}
function rolloverStepTransition ( canvasId, fadeDirection, currentImageNo, imageList, betweenSwaps, transitionSpeed )
{
    $(function(){
        if ( fadeDirection == 'out' )
        {
            // swap the frame bg
            $('#'+canvasId).css('background', "url('"+imageList[currentImageNo]+"') center center no-repeat");
            // fade the image out
            $('#'+canvasId+' img').fadeTo(transitionSpeed, 0.01 );
            // swap direction
            newFadeDirection = 'in';
        }
        else
        {
            // swap the img src
            $('#'+canvasId+' img').attr('src', imageList[currentImageNo]);
            // fade the image in
            $('#'+canvasId+' img').fadeTo(transitionSpeed, 1);
            // swap direction
            newFadeDirection = 'out';
        }
        // increment the image id
        newImageNo = currentImageNo + 1;
        if ( newImageNo >= imageList.length )
            newImageNo = 0;
        // set the timeout
        setTimeout ( function(){ rolloverStepTransition ( ''+canvasId, newFadeDirection, newImageNo, imageList, betweenSwaps, transitionSpeed ); }, betweenSwaps );
    });
}