$(document).ready( function(){
   var images = $.find(".hero_image");
   
   if( images.length > 0 ){
      $("#controls").append( '<ul class="clearfix" id="control_list"></ul>' );
   }
   
   var controlList = $("#control_list");
   
   for( var i=1; i <= images.length; i++ ){
      
      var listItem = $('<li id="image_li_'+i+'"></li>');
      var aItem = $('<a id="image_a_'+i+'" rel="'+i+'" href="#" title="Image '+i+'" class="hide">Image '+i+'</a>');
      
      listItem.append( aItem );
      controlList.append( listItem );
      
      if( i == 1 ){
         listItem.addClass("first");
         aItem.addClass("selected");
      }
      else if( i == images.length ){
         listItem.addClass("last");      
      }
      
      aItem.click( function(){
         swapImage( this );
         clearInterval( scroller );         
      });
   }
   var j = 1;   
   var scroller = setInterval( 
                                 function(){ 
                                    swapImage( 
                                       $( "#image_a_" + ( ( (j++) % 4 ) + 1 ) )
                                    )
                                 }, 
                                 10000);
});

function swapImage( image ){
   var imageNum = $(image).attr('rel');
   $("#control_list > li > a" ).removeClass( "selected" );
   $(".hero_image").fadeOut( 200 );
   $("#hero_image_"+imageNum).fadeIn( 500 );
//   $("#hero_image_"+imageNum).fadeIn( 'slow' );

   $(image).addClass( "selected" );
}

/*

   <ul class="clearfix" id="control_list">
		
		<li class="first"><a href="#" title="Image 1" class="hide selected">Image 1</a></li>
		<li><a href="#" title="Image 2" class="hide">Image 2</a></li>
		<li><a href="#" title="Image 3" class="hide">Image 3</a></li>
		<li class="last"><a href="#" title="Image 4" class="hide">Image 4</a></li>
	
	</ul>
*/