var animate = false;
var elemWith=0;
var timer = null;
var timeout = 5000;
$(document).ready(function() {

	var elements = $('#slider_viewport ul li');
	elemWidth = $(elements[0]).width();
	$('#slider_viewport ul').css('width', (elements.length*elemWidth)+'px');

	$('#slider_navigation .previous').click('left', slideIntro);
	$('#slider_navigation .next').click('right', slideIntro);
	timer = setTimeout(slideIntro, timeout);
});

function slideIntro(event)
{
	clearTimeout(timer);
	if(animate)
		return;
	else
		animate = true;
	if(!event || (event.data != 'right' && event.data != 'left'))
		event = {'data':'right'};
	
	var direction = event.data;
	var move = '-='+elemWidth;
	var list = $('#slider_viewport ul')[0];
	
	if (!list) return;
	
	var elements = $('#slider_viewport ul li');
	var left = $(list).css('left');
	left = parseInt(left.replace(/px/, '', 10));

	if(left <= (-elemWidth*(elements.length-1)) && direction == 'right')
	{
		$(elements[elements.length-1]).after($(elements[0]));
		$(list).css('left', (left+elemWidth)+'px');
	}
	else if(left >= 0 && direction == 'left')
	{
		$(elements[0]).before($(elements[elements.length-1]));
		$(list).css('left', (left-elemWidth)+'px');
	}
		
	
	if(direction == 'left')
		move = '+='+elemWidth
	//Animation
	$(list).animate({
					left: move
					}, {
					duration: 300,
					complete: function() {
						animate = false;
						timer = setTimeout(slideIntro, timeout);
					}
				  });
}