$(document).ready(function() {
	var counter = 1;
	$('.navi').click(function() {
		counter = 0;
		});
	setInterval(autoScrollOpen, 5000);
	function autoScrollOpen() {
		if(counter != 0) {
			var element = $('.vertic:first');
			var bar = $('.rightbar');
			var stp = element.height() + 2 * (element.css('padding-top')).replace('px', '');
			element.clone().appendTo($('.vertic').parent());
			bar.animate({top: (0-stp) + 'px'}, 300, function() {
				$('.vertic:first').remove();
				bar.css('top', '0');
				});
			}
		}
	});
$.fn.scrollVertical = function() {
	$(this).click(function() {
		var navi = $(this).attr('class');
		if(navi.indexOf('navi1') + 1) {
			//if top arrow clicked
			var element = $('.vertic:last');
			var bar = $('.rightbar');
			var stp = element.height() + 2 * (element.css('padding-top')).replace('px', '');
			bar.css('top', (0-stp)+'px');
			element.clone().prependTo($('.vertic').parent());
			$('.navi').css('visibility', 'hidden');
			bar.animate({top: 0}, 300, function() {
				$('.vertic:last').remove();
				$('.navi').css('visibility', 'visible');
				});
			
			}
		else {
			//if bottom arrow clicked
			var element = $('.vertic:first');
			var bar = $('.rightbar');
			var stp = element.height() + 2 * (element.css('padding-top')).replace('px', '');
			element.clone().appendTo($('.vertic').parent());
			$('.navi').css('visibility', 'hidden');
			bar.animate({top: (0-stp) + 'px'}, 300, function() {
				$('.vertic:first').remove();
				bar.css('top', '0');
				$('.navi').css('visibility', 'visible');
				});
			}
		return false;
		});
}