// when the DOM is ready...
$(document).ready(function () {
  
  // Identifies image scrolling area
  var $scroll = $('#rotator .images');
  
  // Place next and previous buttons
  $scroll
    .before('<img class="scrollButtons prev" src="/templates/mojostock/images/left-arrow.png" />')
    .after('<img class="scrollButtons next" src="/templates/mojostock/images/right-arrow.png" />'); // Creates navigation buttons
    
  var $image = $('#rotator .images li:first'); // Identifies the first image in the rotator
  var $details = $('#rotator .description li:first'); // Identifies the first description in the rotator
  var $allImages = $('#rotator .images li'); // Finds all images
  $allImages.css('display', 'none').css('opacity', '0');//Sets default styling
  
  $details.addClass('current').show(); // Shows first slide's description
  $image.css('opacity','1').addClass('image').css('display','block'); // Make the first image visible
  
  // Saves previous and next buttons as variables
  var prev = $('.prev');
  var next = $('.next');
  
  next.click(function () { // When you click the next button...
    
    var $allImages = $('#rotator .images li'); // Finds all images    
    var $details = $('li.current'); // Finds and save the current image details
  	var $image = $('li.image'); //Finds and saves the current image

    $allImages.css('display', 'none').css('opacity', '0'); // Resets default styling

  	$details.stop().hide(); //Hide details
  	$image.animate({opacity: 0}, 1000).stop().hide(); //Fade out image

  	$details.removeClass('current'); //Remove current class
  	$image.removeClass('image'); //Remove visible class

  	if ($details.next('li').length == 0) //If the li is the last in the list...
  	{ 
  		$('#rotator .description li:first').addClass('current').stop().show(); // Shows the description for the first item
  		$('#rotator .images li:first').stop().show().addClass('image').animate({opacity: 1}, 1000); // Makes the first image visible
  		
  	} else { //Otherwise... (for most slides)
  		$details.next('li').addClass('current').stop().show(); // Add current class to next detail and shows description
  		$image.next('li').stop().show().addClass('image').animate({opacity: 1}, 1000); // Add visible class to next image and fades in
  	} // End if... else...
		$image.stop().hide(); // Hides previous image
  })
  
  prev.click(function () { // When you click the previous button...
    
    var $allImages = $('#rotator .images li'); // Finds all images
    var $details = $('li.current'); // Find and save the current image details
  	var $image = $('li.image'); //Finds and saves the current image
  	
    $allImages.css('display', 'none').css('opacity', '0'); // Reset default styling
  	
  	$details.stop().hide(); //Hide details
  	$image.hide(); //Fade out image

  	$details.removeClass('current'); //Remove current class
  	$image.removeClass('image').animate({opacity: 0}, 1000).stop().hide(); //Remove visible class

  	if ($details.prev('li').length == 0) //If the li is the last in the list...
  	{ 
  		$('#rotator .description li:last').addClass('current').stop().show(); // Adds current class and shows last description in the list
  		$('#rotator .images li:last').stop().show().addClass('image').animate({opacity: 1}, 1000); // Adds visible class and shows last description in the list
  		
  	} else { //Otherwise... (for most slides)
  		$details.prev('li').addClass('current').stop().show(); // Add current class to next detail, show
  		$image.prev('li').stop().show().addClass('image').animate({opacity: 1}, 1000); // Add visible class to next image and fade in
  	} // End if... else...
  	$image.stop().hide(); // Hides previous image
  }); 
});

function rotate()  // Automatic rotation effect
{
	var $allImages = $('#rotator .images li'); // Finds all images
  var $details = $('li.current'); // Find and save the current image details
	var $image = $('li.image'); //Finds and saves the current image
	
  $allImages.css('display', 'none').css('opacity', '0'); // Resets default styling

	$details.stop().hide(); //Hide details
	$image.animate({opacity: 0}, 1000).stop().hide(); //Fade out image

	$details.removeClass('current'); //Remove current class
	$image.removeClass('image'); //Remove visible class

	if ($details.next('li').length == 0) //If the li is the last in the list...
	{ 
		$('#rotator .description li:first').addClass('current').stop().show(); // Show first description
		$('#rotator .images li:first').stop().show().addClass('image').animate({opacity: 1}, 1000); // Show first image
		
	} else { //Otherwise... (for most slides)
		$details.next('li').addClass('current').stop().show(); // Add current class to next detail, show
		$image.next('li').stop().show().addClass('image').animate({opacity: 1}, 1000); // Add visible class to next image and fade in
	}  
	$image.stop().hide(); // Hide previous image
	setTimeout(rotate, 3000); // Wait and run the function again
}
setTimeout(rotate, 3000); // Wait and run rotate function