var config = {
	scrollerTimeout: 8000
}

$(function() {
	
	$('.scroller').each(function() {
		var height = 0;
		var width = 0;
		var $inner = $('<div class="scroller-inner" />');
		
		$(this).append($inner);
		
		var $items = $(this).find('.scroller-item');
		
		$items.each(function() {
			height = $(this).height() > height ? $(this).height() : height;
		}).height(height).appendTo($inner);
		
		$inner.width(300 * $items.length);
		$control = $('<div class="scroller-control" />');
		for(var i = 0; i < $items.length; i++) {
			$control.append('<a class="scroller-control-button" href="#">'+(i+1)+'</a>');
		}
		
		var nextItem = function($control) {
			var $next = $control.find('.active').next();
			if($next.length == 0) {
				$control.find('a:first').click();
			} else {
				$next.click();
			}
		}
		
		$control.find('.scroller-control-button').click(function() {
			
			clearInterval($control.data('interval'));
			$control.data('interval', setInterval(nextItem, config.scrollerTimeout, $control));
			
			var index = $(this).index();
			var $inner = $(this).closest('.scroller').find('.scroller-inner');
			
			$inner.stop().animate({
					marginLeft: index * 300 * -1
			}, 400);
				
			$(this).parent().find('.active').removeClass('active');
			$(this).addClass('active');
			return false;
		}).first().click();
		
		$(this).append($control);
	});
});