$(function() {
	$('#scrollwrap').addClass("scrollwrap");
	$('#scrollwrap > #fotowrapper').addClass("scroll");		
	
	var $wrapper 	 = $('.scrollwrap');
	var $slider 	 = $('.scroll');
	var $items 		 = $slider.find('> *');
	var $singleblock = $items.filter(':first');
	
	totalWidth = 0;
	$items.each(function()
	{
		totalWidth += $(this).width();
	});
	
	
	
	paddingWidth = parseInt($slider.css('padding-left')) ;
	singleWidth = $singleblock.outerWidth(true);
	visible = Math.ceil( ($wrapper.innerWidth() - 2*paddingWidth) / singleWidth);
	currentPage = 1;
	aantalItems = $items.length;
	pages = Math.ceil(aantalItems / visible);
	itemsleft = aantalItems - currentPage * visible;
	
	
/*
console.log('totalWidth: ' + totalWidth);	
console.log('singleWidth: ' + singleWidth);
console.log('wrapperwidth: ' + $wrapper.innerWidth() ); 
console.log('pages: ' + pages);
console.log('Aantal items: ' + aantalItems );
console.log('visible: ' + visible);	
console.log('itemsleft: ' + itemsleft);
console.log('paddingWidth: ' + paddingWidth);
*/

	
	$wrapper.scrollLeft(-totalWidth);
	var $superwrapper = $('.backside.body.home .home_main, .body.leesvoer')
	
	$wrapper.parent().append('<div id="scroll_navigation"><span class="arrow previous"><a href="#">&lt;</a></span><div id="status_wrapper" /><span class="arrow next"><a href="#">&gt;</a></span></div>');	
		
	function toggle(oldPage, page){		
		deltaOldPage = Math.abs(oldPage - page);

		if (currentPage == 1){
			$('.arrow.previous').fadeOut(250);
			$('.arrow.next').fadeIn(250);
		}		
		
		if (currentPage > 1 && currentPage < pages){						
					$('.arrow.previous').fadeIn(250);
					$('.arrow.next').fadeIn(250);
		}		
					
		if (currentPage == pages){
			$('.arrow.next').fadeOut(250);
			$('.arrow.previous').fadeIn(250);					
		}
	}
		
	$('.arrow.previous').css('display','none');		
	$('#scrollwrap .fotoitem:nth-child(4n)').addClass('laatste');

	
	function scrollPage(page){
		var richting = page < currentPage ? -1 : 1;
		var deltaPages = Math.abs(currentPage - page);
		var scrollDistance = ($wrapper.innerWidth() - paddingWidth)  * richting * deltaPages;				
								
		$wrapper.filter(':not(:animated)').animate({
			scrollLeft : '+=' + scrollDistance
		}, deltaPages * 650 , function (){
			oldPage = currentPage			
			currentPage = page;
			toggle(oldPage, page);
		});	
	}
	
window.scrollPage = scrollPage;
			
	$('#scroll_navigation .next a').click(function(){
		scrollPage(currentPage + 1);
		return false;	
	});
	
	$('#scroll_navigation .previous a').click(function(){
		scrollPage(currentPage - 1);
		return false;	
	});

	
});