// when the DOM is ready...
$(document).ready(function () {

  // Identifies image scrolling area
    var $scroll = $('#rotator-wrapper #rotator-image');

    // Place next and previous buttons
    $scroll
        .before('<img class="scrollButtons prev" src="/templates/blu/images/arrow-prev.png" />')
        .after('<img class="scrollButtons next" src="/templates/blu/images/arrow-next.png" />');
        
        
    // Saves previous and next buttons as variables
    var prev = $('.prev');
    var next = $('.next');
    
    
    // Sets opacity of detail area and adds visible class to li
    $("#rotator-wrapper #rotator-details").animate({ opacity: 0.5 }, 1);
    $("#rotator-wrapper .rotator-navigation li:first").show().addClass('current');
    $("#rotator-wrapper #rotator-image li:first").show().addClass('image');

    next.click(function() //When you click the next button...
    {
      var $details = $('li.current'); // Find and save the current image details
      var $image = $('li.image'); //Finds and saves the current image
      
      if ($details.next('li').length == 0) //If the li is the last in the list...
      
      {
        $details.hide(); //Hide details //Fade out image
        $image.slideUp(1000);
        
        $details.removeClass('current'); //Remove current class
        $image.removeClass('image'); //Remove image class
        
        $('#rotator-wrapper .rotator-navigation li:first').addClass('current').show(); // add the visible class to first detail li and show
        $('#rotator-wrapper #rotator-image li:first').addClass('image').slideDown(1000); // add image class to first image and fade in

      } 
      
      else { //Otherwise...
        $details.hide(); //Hide details
        $image.slideUp(1000); //Fade out image
        
        $details.removeClass('current'); //Remove current class
        $image.removeClass('image'); //Remove image class
        
        $details.next('li').addClass('current').show(); // Add current class to next detail, show
        $image.next('li').addClass('image').show(); // Add image class to next image and fade in
      } 
    })

    prev.click(function() //When you click the previous button...
    {
      var $details = $('li.current'); // Find and save the visible li
      
      if ($details.prev('li').length == 0) //If the li is the first in the list...
      {
        $details.removeClass('current'); // Remove visible class
        $('#rotator-wrapper .rotator-navigation li:last').addClass('current'); // Add visible class to last li
        $('#rotator-wrapper #rotator-image li:last').addClass('current')
      } 
      
      else { // Otherwise...
          $details.removeClass('current'); // Remove the visible class
          $details.prev('li').addClass('current'); // Add visible class to previous li
      }
    })

function rotate() {
	var $details = $('li.current'); // Find and save the current image details
      var $image = $('li.image'); //Finds and saves the current image
      
      if ($details.next('li').length == 0) //If the li is the last in the list...
      
      {
        $details.hide(); //Hide details //Fade out image
        $image.slideUp(1000);
        
        $details.removeClass('current'); //Remove current class
        $image.removeClass('image'); //Remove image class
        
        $('#rotator-wrapper .rotator-navigation li:first').addClass('current').show(); // add the visible class to first detail li and show
        $('#rotator-wrapper #rotator-image li:first').addClass('image').slideDown(1000); // add image class to first image and fade in

      } 
      
      else { //Otherwise...
        $details.hide(); //Hide details
        $image.slideUp(1000); //Fade out image
        
        $details.removeClass('current'); //Remove current class
        $image.removeClass('image'); //Remove image class
        
        $details.next('li').addClass('current').show(); // Add current class to next detail, show
        $image.next('li').addClass('image').show(); // Add image class to next image and fade in
      }
			
			setTimeout(rotate,10000);
}


setTimeout(rotate,30000);

});