$(document).ready( function() {
	
	// Generate Navigation
	var numBanners = $("#rotator div").size();
	
	
	
	//  + your content here +  appending/cacatinating string example
	//  html needs to be all in 1 line
	$("#rotator div:eq("+ (numBanners - 1) +")").after('<ul id="rotator_nav"><li><a href="#" title="1">1</a></li></ul>');
	// i is unique to the for loop
	for( var i = 0 ; i <= ( numBanners - 1); i++ ) {
		// #rotator div - this can be any class selector
		$("#rotator div:eq("+ i +")").addClass("banner bn0"+ (i + 1) +"")
		
		$("#rotator_nav li:eq("+ (i - 1) +")").after('<li><a href="#" title="'+ (i + 1) +'">'+ (i + 1) +'</a></li>')
		
		}
	
	//Display first banner
	$(".bn01").fadeIn().addClass("on");
	
	//add class "on" to first link
	$("#rotator_nav li:eq(0) a[title='1']").addClass("on");
	
	var startRotation = setInterval( rotationFade, 5000 )
	
	//set incrementor for rotation
	var i = 0
	
	function rotationFade(){
		
		if(i < (numBanners - 1) ){
			$(".bn0"+ (i + 1) +" ").fadeOut("slow", function() {
				$(".bn0"+ (i +2) +" ").fadeIn("fast").addClass("on");
				$("#rotator_nav li a").removeClass("on");
				$("#rotator_nav li a[title='"+ (i +2) +"']").addClass("on");
				i = i + 1
			}).removeClass("on");
		} else if( i = ( numBanners - 1 )) {
			$(".bn0"+ (i +1) +" ").fadeOut( "slow", function (){
				$(".bn01").fadeIn("fast").addClass("on");
				$("#rotator_nav li a").removeClass("on");
				$("#rotator_nav li a[title='"+ (i +1) +"']").addClass("on");
			}).removeClass("on");
			
			i=0			
		};		
	};
	
	$("#rotator_nav li a").click( function (){
		clearTimeout( startRotation )
		if( !$(this).hasClass("on")){
			
			$("#rotator_nav li a").removeClass("on");
			$(this).removeClass("on");
			
			var thisLink = $(this).attr("title");
			$(".banner.on").removeClass("on").fadeOut("fast", function(){
				$(".bn0"+ thisLink +"").addClass("on").fadeIn("slow")
			});
			
		};
		
	
	});
	
	
});