function slideSwitch() {
    var $active = $('#lear_banner_slider_slide IMG.active');

    if ( $active.length == 0 ) $active = $('#lear_banner_slider_slide IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#lear_banner_slider_slide IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active');
		
		var index = $('#lear_banner_slider_slide img').index($next);
		$('.learn_active_balls[class=learn_active_balls]').attr('class','learn_inactive_balls');
		$(".learn_balls_box > div[rel="+ (index + 1) +"]").attr('class',"learn_active_balls");
		
    $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 400, function() {
          $active.removeClass('active last-active');
      });
            
    $active.css({opacity: 1.0})
      .animate({opacity: 0.0}, 400, function() { 
      });
}

$(function() {

	if($('.learn_inactive_balls').size()>1){
	
		intervalID = setInterval( "slideSwitch()", 10000 );
		 
		$('.learn_inactive_balls').each(function(){
		
			$(".learn_balls_box > div[rel=1]").attr('class',"learn_active_balls");
			
			$(this).click(function(){
				if(!$(this).is('.learn_active_balls'))
				{
				  clearInterval(intervalID);
				  intervalID = setInterval( "slideSwitch()", 10000 );
				  
				  $('.learn_active_balls').attr('class','learn_inactive_balls');
				  
				  $(this).attr('class','learn_active_balls');
				  
				  var item = $(this).attr('rel');
			
				  var $active = $('#lear_banner_slider_slide IMG.active');
			
				  $('#lear_banner_slider_slide img:nth-child('+item+')').css({opacity: 0.0})
						.addClass('active')
						.animate({opacity: 1.0}, 400, function() {
							 $active.removeClass('active last-active');
						});

				  $active.css({opacity: 1.0})
					  .animate({opacity: 0.0}, 400, function() {				
					});
				  
				}
			})
		
		})        
	}
    
});