var speed = 1000
var easeMethod = 'cubicEaseOut'
var timer = 5 //Second(s).

$(function(){
	var current = 0;
	var inter;
	var ul = $('#slider ul')
	var li = $('li', ul)
	var length = li.length;
	var width = li.width()
	
	ul.width(length*width)
	inter = setInterval(nextAd, timer*1000)
	
	$('#thumbs li').each(function(){
		$(this).click(function(){
			current = $('#thumbs li').index(this)
			clearInterval(inter)
			moveto(current)
			inter = setInterval(nextAd, timer*1000)
		});
	});
	$('#banner .controls .next').click(function(){
		clearInterval(inter)
		nextAd();
		inter = setInterval(nextAd, timer*1000)
	});
	$('#banner .controls .prev').click(function(){
		clearInterval(inter)
		prevAd();
		inter = setInterval(nextAd, timer*1000)
	});
	
	function nextAd(){
		++current;
		if(current >= length) current = 0;
		moveto(current)
	}
	function prevAd(){
		--current;
		if(current<0) current = length-1
		moveto(current)
	}
	function moveto(index){
		left = - width * index;
		
		ul.stop().animate({'left':left}, {queue:false, duration:speed, easing:easeMethod})
		$('#thumbs li.current').removeClass('current');
		$('#thumbs li:nth-child('+(index+1)+')').addClass('current')
	}
});