$(document).ready(function(){			
	$banners = $('#banners');	
	$banners.cycle({	
		fx:'fade',
		pager: '#tiles',
		pagerAnchorBuilder: function(i) {					
			return '<a id="tile'+(i+1)+'" class="tile" href="#">'+(i+1)+'</a>';						
			return '.paging_controls a:eq('+i+')';
		},
		timeout: 7000,
		speed: 2000,		
		before :function(currSlideElement, nextSlideElement, options, forwardFlag){		
			var i = $('#banners img').index(nextSlideElement);			
			var $nextOverlay = $('#overlay-content > div').eq(i);			
			$('#overlay-content > div').not($nextOverlay).fadeOut(1000, function(){
				$('#overlay-content > div').eq(i).fadeIn(1500);
			});		
		},
		onPagerEvent: function (zeroBasedSlideIndex, slideElement){			
			$banners.cycle('pause');
		}
	});		
	
	$('#next').click(function(){		
		$banners.cycle('next');	
	});
	
	$('#prev').click(function(){		
		$banners.cycle('prev');	
	});
	
});