$(document).ready(function() {

	var autoscrolling = true;
	
	var obj = $('#holder');
	$('#next').click(function(){
		rightScroll(obj);
	});
	$('#next2').click(function(){
		leftScroll(obj);
	});
	
	$('#picture').mouseover(function () {
			autoscrolling = false;
	}).mouseout(function () {
			autoscrolling = true;
	});

	
	setInterval(function () {
		if (autoscrolling) {
			$('#next2').trigger('click');
		}
	}, 2000);
	
});


function checkScroll(obj, lim)
{
	var num = obj.css('left');
	num = parseInt(num);
	return num;
}

function leftScroll(obj)
{
	if(obj.is('.still')){
		obj.removeClass('still');
		replaceElem('left', obj);
		   //.animate({left: '-=209px'}, 1000, function(){ replaceElem('left', obj) });
	}
}

function rightScroll(obj)
{
	if(obj.is('.still')){
		obj.removeClass('still');
		replaceElem('right', obj);
		   //.animate({left: '+=209px'}, 1000, function(){ replaceElem('right', obj) });
	}
}

function replaceElem(side, obj)
{
	if (side == 'left'){
		var nod = obj.find('.item').first().html();
		obj.append('<div class="item">'+nod+'</div>');
		obj.animate({left: '-=209px'}, 1000, function(){ 
					obj.find('.item').first().remove();
					obj.css('left', '0px').addClass('still');
			 });
	}
	else if (side == 'right') {
		var nod = obj.find('.item').last().html();
		obj.prepend('<div class="item">'+nod+'</div>');
		obj.css('left', '-209px')
			 .animate({left: '+=209px'}, 1000, function(){ 
					obj.find('.item').last().remove();
					obj.addClass('still');
			 });
	}
}