$(function() { 

	//set some variables
	var easing = 'swing'; //http://gsgd.co.uk/sandbox/jquery/easing/
	var scroll = $('#afeature .scroller');
	var container = $('#afeature .wrapper');
	var panel = $('#afeature .panel');

	//make sure scroll div does not have any scrollers
	scroll.css({ 
		'overflow' : 'hidden' , 
		'width' : scroll.parent().width() 
		//width is important for iexplorer, which requires a width to scroll
		});
	
	//calculate the width for the container  
	container.css({ 'width' : panel.width() * panel.size() }); 
	
	//float panels to left
	panel.css({ 'float' : 'left' });

	//associate all panels with an id and construct anchor links
	for (var i = 0; i < panel.size(); i++)
	{
		$(panel[i]).attr('id', 'panel_' + i);
		
		var anchor = $('<span>').appendTo('#afeature .nav');
		anchor.html('<a href="#panel_' + i + '" class="panel_' + i + '"><img src="images/navibullet.gif"/></a>');
	} 			
	
	//apply jQuery.serialScroll
	//apply jQuery.localScroll
	
	var scrollOptions = {
		target: '.scroller', //the scroll div
		axis: 'x', //axis y/x
		queue: true, //one axis at a time
		duration: 300, //length of animation
		items: 'div.panel', //scrolled elements
		force: true, //initial scroll on start
		cycle: true, //show first element after last
		interval: 14000, //milliseconds
		easing: easing, //animation easing
		onBefore: function( e, elem, $pane, $items, pos ){
			//remove all active classes from navigation elements
			$("#afeature .nav a").removeClass("active");
		},
		onAfter: function( elem ){
			//then set an active class for the current navigation element
			$('.nav .'+elem.id).addClass("active");
		}
	};	

	$('#afeature').serialScroll(scrollOptions);
	$('#afeature .nav').localScroll(scrollOptions);
	
	$('#afeature .nav a').click(function(){
		$('.scroller').trigger('stop'); //reset the scroll interval
		$('.scroller').trigger('start');//reset the scroll interval
	});
});