window.addEvent('domready', function() {
  
  if ($('imageRotator'))
  {
    //get a list of images to rotate
    var images = $('imageRotator').getElements('div');
  
    // hide all the images
    images.setStyles({
  		display:'block',
  		opacity: 0
  	});

    //show the first one 
  	images[0].setStyles({opacity: 1});
    
    current_index = 0;
    
    // set the slideshow in motion
    window.toggle_state = "playing";
    
    // add control to next button
    $('rotator_control').addEvent("click",function(el){
      el.stop();
      
      if (window.toggle_state == "playing")
      { 
        window.toggle_state = "stopped";
        $('rotator_control').addClass("play");
       
      }
      else
      { 
        window.toggle_state = "playing"; 
        $('rotator_control').removeClass("play")
        myTimer = $clear(myTimer);
        runSlideshow();
      }
      
    });
    
    
    
     
    function runSlideshow()
    {
      if (window.toggle_state == "playing")  
      {
        if(current_index+1 == images.length) 
         { 
           next_index = 0;
         }
         else
         {
           next_index = current_index + 1;
         }

         //hide image
         images[current_index].effect('opacity', {duration: 1000, transition: Fx.Transitions.Quart.easeIn }).start(0);

         //show next
         images[next_index].effect('opacity', {duration: 1000, transition: Fx.Transitions.Quart.easeInOut}).start(1)
     
         if(current_index+1 == images.length) 
          { current_index = 0;  }
          else
          { current_index += 1; }
       }
        myTimer = $clear(myTimer);
        myTimer = runSlideshow.delay(7000);
       
    }
    
    var myTimer = runSlideshow.delay(7000)
  }
});