function theRotatorStartpage()
{
  var intervalId = 0;
  
  //Set the opacity of all images to 0
  $('div#rotatorStartpage .item').css({opacity: 0.0});
  
  //Get the first image and display it (gets set to full opacity)
  $('div#rotatorStartpage .item').css({display: 'block'});  
  $('div#rotatorStartpage .item:first').animate({opacity: 1.0}, 1000);
  
  //Animate the bubbles on first image
  $('div#rotatorStartpage .item #textOne').animate({bottom: 135, left:$(window).width()/2 - 500}, 500);
  $('div#rotatorStartpage .item #textTwo').delay(300).animate({bottom: 135, left:$(window).width()/2 - 300}, 500);
  $('div#rotatorStartpage .item #textThree').delay(600).animate({bottom: 135, left:$(window).width()/2 - 70}, 500);
  
  //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
  intervalId = setInterval('rotateStartpage()',5000);
  
  $('div.menuWrapper .item').mouseenter(function() {
         
    // First item
    if(this.offsetLeft < 100)
    {
      clearInterval ( intervalId );
      rotateStartpage(2);
    }
    // Second item
    else if(this.offsetLeft > 100 & this.offsetLeft < 400)
    {
      clearInterval ( intervalId );
      rotateStartpage(3);
    }
    // Last item
    else if(this.offsetLeft > 400)
    {
      clearInterval ( intervalId );
      rotateStartpage(4);
    }
  });
}

function rotateStartpage(activeNumber)
{  
  if(!activeNumber)
  {
    //Get the first image
    var current = ($('div#rotatorStartpage .item.show')?  $('div#rotatorStartpage .item.show') : $('div#rotatorStartpage .item:first'));
    var activeBg = $('#topImageWrapper .menuWrapper .activeBgStartpage');
    
    var activeNumberBg = $('#topImageWrapper .numberWrapper .numberActiveBgStartpage');
    
    var numberOfItems=$('div#rotatorStartpage .item').length;
    //Get next image, when it reaches the end, rotate it back to the first image
    var next;
    
    if (current.next().length)
    {
      if (current.next().hasClass('show'))
      {
        next=$('div#rotatorStartpage .item:first');
      }
      else
      {
        next=current.next();
      }
    }
    else
    {
      next=$('div#rotatorStartpage .item:first');
    }
    
    //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}, 2000);
    
    if(activeBg.css('left') == '-9999px')
    {
      activeBg.css({left: '0px'});
      activeBg.addClass('green');
      activeNumberBg.css({right: '80px'});
    }
    else if(activeBg.css('left') == '0px')
    {
      activeBg.animate({left: '+=333'}, 500);
      activeBg.removeClass('green').addClass('blue');   
      activeNumberBg.animate({right: '40px'}, 500);    
    }
    else if(activeBg.css('left') == '333px')
    {
      activeBg.animate({left: '+=333'}, 500);
      activeBg.removeClass('blue').addClass('gray');       
      activeNumberBg.animate({right: '0px'}, 500);        
    }  
     else if(activeBg.css('left') == '666px')
    {
      activeBg.css({left: '-9999px'});
      activeBg.removeClass('gray');
      activeNumberBg.css({right: '9999px'});        
    }
    
    //Hide the current image
    current.animate({opacity: 0.0}, 2000)
    .removeClass('show');
  }
  if(activeNumber == '1')
  {
    //Get the first image if it's not current
    var current = ($('div#rotatorStartpage .item.show')?  $('div#rotatorStartpage .item.show') : $('div#rotatorStartpage .item:first'));
    var activeBg = $('#topImageWrapper .menuWrapper .activeBgStartpage');
    
    var activeNumberBg = $('#topImageWrapper .numberWrapper .numberActiveBgStartpage');
    
    if(!current.hasClass('one'))
    {
      //Get next image, when it reaches the end, rotate it back to the first image
      var next;
           
      next=$('div#rotator .item.one');
      
      //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}, 500);
  
      activeBg.animate({left: '-9999px'}, 300);
      activeBg.removeClass('blue').removeClass('green').removeClass('gray').addClass('blue');         
      activeNumberBg.animate({right: '9999px'}, 300);
      
      //Hide the current image
      current.animate({opacity: 0.0}, 500)
      .removeClass('show');
    }
  }

  if(activeNumber == '2')
  {
    //Get the first image if it's not current
    var current = ($('div#rotatorStartpage .item.show')?  $('div#rotatorStartpage .item.show') : $('div#rotatorStartpage .item:first'));
    var activeBg = $('#topImageWrapper .menuWrapper .activeBgStartpage');
    
    var activeNumberBg = $('#topImageWrapper .numberWrapper .numberActiveBgStartpage');
    
    if(!current.hasClass('two'))
    {
      //Get next image, when it reaches the end, rotate it back to the first image
      var next;
      
      next=$('div#rotatorStartpage .item.two');
      
      //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}, 500);
  
      activeBg.animate({left: '0px'}, 300);
      activeBg.removeClass('blue').removeClass('green').removeClass('gray').addClass('green');               
      activeNumberBg.animate({right: '80px'}, 300);
      
      //Hide the current image
      current.animate({opacity: 0.0}, 500)
      .removeClass('show');
    }
  }
  if(activeNumber == '3')
  {
    //Get the first image if it's not current
    var current = ($('div#rotatorStartpage .item.show')?  $('div#rotatorStartpage .item.show') : $('div#rotatorStartpage .item:first'));
    var activeBg = $('#topImageWrapper .menuWrapper .activeBgStartpage');
    
    var activeNumberBg = $('#topImageWrapper .numberWrapper .numberActiveBgStartpage');
    
    if(!current.hasClass('three'))
    {
      //Get next image, when it reaches the end, rotate it back to the first image
      var next;
      
      next=$('div#rotatorStartpage .item.three');
      
      //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}, 500);
  
      activeBg.animate({left: '333px'}, 300);
      activeBg.removeClass('blue').removeClass('green').removeClass('gray').addClass('blue');         
      activeNumberBg.animate({right: '40px'}, 300);
      
      //Hide the current image
      current.animate({opacity: 0.0}, 500)
      .removeClass('show');
    }
  }
  if(activeNumber == '4')
  {
    //Get the first image if it's not current
    var current = ($('div#rotatorStartpage .item.show')?  $('div#rotatorStartpage .item.show') : $('div#rotatorStartpage .item:first'));
    var activeBg = $('#topImageWrapper .menuWrapper .activeBgStartpage');
    
    var activeNumberBg = $('#topImageWrapper .numberWrapper .numberActiveBgStartpage');
    
    if(!current.hasClass('four'))
    {
      //Get next image, when it reaches the end, rotate it back to the first image
      var next;
      
      next=$('div#rotatorStartpage .item.four');
      
      //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}, 500);
  
      activeBg.animate({left: '666px'}, 300);
      activeBg.removeClass('blue').removeClass('green').removeClass('gray').addClass('gray');               
      activeNumberBg.animate({right: '0px'}, 300);
      
      //Hide the current image
      current.animate({opacity: 0.0}, 500)
      .removeClass('show');
    }
  }
};

$(document).ready(function()
{    
  //Load the slideshow
  theRotatorStartpage();
});