function theRotator() {
      $('div.rotater ul li').css({opacity: 0.0});                  	
      $('div.rotater ul.a li:first').css({opacity: 1.0});
      $('div.rotater ul.b li:first').css({opacity: 1.0});
      $('div.rotater ul.c li:first').css({opacity: 1.0});
      $('div.rotater ul.d li:first').css({opacity: 1.0});
      setInterval('rotatea()',6000);
      setInterval('rotateb()',5000);
      setInterval('rotatec()',5500);
      setInterval('rotated()',7000);                                                                                  	
    }
    
    function rotatea() {	
    //Get the first image                                                                        
    var current = ($('div.rotater ul.a li.show')?  $('div.rotater ul.a li.show') : $('div.rotater ul.a li:first'));                  
    if ( current.length == 0 ) current = $('div.rotater ul.a li:first');                  
    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotater ul.a li:first') :current.next()) : $('div.rotater ul.a li:first'));                  	                  	
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');                            	
    };
    function rotateb() {	
    //Get the first image                                                                        
    var current = ($('div.rotater ul.b li.show')?  $('div.rotater ul.b li.show') : $('div.rotater ul.b li:first'));                  
    if ( current.length == 0 ) current = $('div.rotater ul.b li:first');                  
    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotater ul.b li:first') :current.next()) : $('div.rotater ul.b li:first'));                  	                  	
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');                            	
    };  
    function rotatec() {	
    //Get the first image                                                                        
    var current = ($('div.rotater ul.c li.show')?  $('div.rotater ul.c li.show') : $('div.rotater ul.c li:first'));                  
    if ( current.length == 0 ) current = $('div.rotater ul.c li:first');                  
    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotater ul.c li:first') :current.next()) : $('div.rotater ul.c li:first'));                  	                  	
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');                            	
    };  
    function rotated() {	
    //Get the first image                                                                        
    var current = ($('div.rotater ul.d li.show')?  $('div.rotater ul.d li.show') : $('div.rotater ul.d li:first'));                  
    if ( current.length == 0 ) current = $('div.rotater ul.d li:first');                  
    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotater ul.d li:first') :current.next()) : $('div.rotater ul.d li:first'));                  	                  	
    var sibs = current.siblings();
    var rndNum = Math.floor(Math.random() * sibs.length );
    var next = $( sibs[ rndNum ] );
    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');                            	
    };