window.addEvent('domready', function()
{
	var scroll = new Fx.Scroll('stories', {
		wait: false,
		duration: 800,
		/*offset: {'y': 27},*/
		transition: Fx.Transitions.Quad.easeOut
	});
	
	var stories = ['story1', 'story2', 'story3', 'story4', 'story5', 'story6', 'story7'];
	var lastStory = stories.length - 1;
	var storyWidth = 455;
	var currentIndex = 0;
	var scrollInterval;
	
	resetScrollInterval();
	
	var marqueeDots = $$('#marqueeNav a');
	
	for(var i=0; i<marqueeDots.length; i++)
	{
		var dot = marqueeDots[i];
		dot.addEvent('click', function(event) { event = new Event(event).stop(); scrollStory(this) } );
	}
	
	function onScrollInterval()
	{
		currentIndex++;
		if(currentIndex > lastStory) currentIndex = 0;
		
		scroll.scrollTo(currentIndex * storyWidth, 0);
		updateDotStates();
	}
	
	function resetScrollInterval()
	{
		clearInterval(scrollInterval);
		scrollInterval = setInterval(onScrollInterval, 4000);
	}
	
	function scrollStory(callingDot)
	{
		currentIndex = callingDot.getProperty('name');
		scroll.scrollTo(currentIndex * storyWidth, 0);
		
		updateDotStates();
		resetScrollInterval();
	}
	
	function updateDotStates()
	{
		for(var i=0; i<marqueeDots.length; i++)
		{
			var dot = marqueeDots[i];
			dot.className = '';
			if(dot.getProperty('name') == currentIndex)
			{
				dot.className = 'selected';
			}
		}
	}
	
	$('prev').addEvent('click', function(event) 
	{
		event = new Event(event).stop();
		currentIndex--;
		if(currentIndex < 0) currentIndex = lastStory;
		
		scroll.scrollTo(currentIndex * storyWidth, 0);
		updateDotStates();
		resetScrollInterval();
	});
	
	$('next').addEvent('click', function(event) 
	{
		event = new Event(event).stop();
		currentIndex++;
		if(currentIndex > lastStory) currentIndex = 0;
		
		scroll.scrollTo(currentIndex * storyWidth, 0);
		updateDotStates();
		resetScrollInterval();
	});
								
	
});