// JavaScript Document
$(document).ready(function(){

// add controls to the main picture
  
$('.controlHolder').prepend('<ul class="controls"><li><a class="selected" href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>');


 $('.controls li a').click(function(){
	
		
	$('.controls li a').removeClass("selected");
	
	$(this).addClass('selected');
	
	var n = $(".controls a").index($(".controls a.selected")[0]);
	
	$('#rfPics > ul li').hide().eq(n).fadeIn();
	
	clearInterval(myInterval);
	
	return false;
})
      


 var myInterval = setInterval( 
 function(){
 
	var n = $(".controls a").index($(".controls a.selected")[0]);  // (1)
    
    var x = $(".controls a").eq(n+1);
    
    if(n==($(".controls a").length - 1)) 
    { 		// (2)
	
	$('.controls li a').removeClass("selected");
	
	$(".controls a").eq(0).addClass('selected');
	
	$('#rfPics > ul li').hide().eq(0).fadeIn();
	 
	}
	
	else
	{	// (3)

    
    $('#rfPics > ul li').eq(n).fadeOut('slow').end().eq(n+1).fadeIn('slow');	
	
	$('.controls li a').removeClass("selected");
	
	$(".controls a").eq(n+1).addClass('selected');
	}
	         
         }, 5000);
      
myInterval;


});