$(function() {
	$('#scrollwrap').addClass("scrollwrap");
	$('#scrollwrap > ul.shelf').addClass("scroll");
	$('#scrollwrap > #newsblock_wrapper').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>');
	$items.filter(':nth-child(' + visible + 'n+1)').each(function(){
		$('#status_wrapper').append('<span class="status"><a href="#">.</a></span>');
	});
	
	
	$('#scroll_navigation .status:nth-child(1) a').css('opacity',1);
	$('#scroll_navigation .status:not(:nth-child(1)) a').css('opacity',0);	
	
	statusWidth = $('.leesvoer #status_wrapper').innerWidth();
	halfStatusWidth = statusWidth / 2;
	$('.leesvoer #status_wrapper').css('left', - halfStatusWidth);
	
	
	function toggle(oldPage, page){		
		deltaOldPage = Math.abs(oldPage - page);

		if (currentPage == 1){
			$('.arrow.previous').fadeOut(250);
			$('.arrow.next').fadeIn(250);
		}		
		
						
		$('.status').each(function(i, val){
			if (currentPage == i+1){	
				
				$('#scroll_navigation .status:nth-child('+ (i+1) +') a').animate({
				opacity : 1
				}, 350);
				$('#scroll_navigation .status:not(:nth-child('+ (i+1) +')) a').animate({
					opacity : 0
				}, 350);
				/*alert(i+1);*/
								
					if (i+1 != 1){$('.arrow.previous').fadeIn(250);}
					if (i+1 != pages){$('.arrow.next').fadeIn(250);}				
				return false;
			}		
		});					
		
		
		if (currentPage == pages){
			$('.arrow.next').fadeOut(250);
			$('.arrow.previous').fadeIn(250);					
		}
	}	
	$('.arrow.previous').css('display','none');		

	
	function scrollPage(page){
		var richting = page < currentPage ? -1 : 1;
		var deltaPages = Math.abs(currentPage - page);
		var scrollDistance = ($wrapper.innerWidth() - paddingWidth)  * richting * deltaPages;		
		var $selectBlock = $slider.find('.newsblock:nth-child(1)');
								
		$wrapper.filter(':not(:animated)').animate({
			scrollLeft : '+=' + scrollDistance
		}, deltaPages * 500 , 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;	
	});
		
	$('#scroll_navigation .status a').each(function(i, val){
		$(this).click(function(){
			scrollPage(i+1);
			return false;
		});
	});		
		
	
	if((jQuery.browser.version == 6.0) || (jQuery.browser.version == 7.0)){	
		offset = pages*10 + 5;
				
		offsetright = parseInt($('.arrow.next').css('right'))-offset;
		$('.arrow.next').css('right',offsetright);
		
		offsetleft = parseInt($('.arrow.previous').css('left'))+offset;
		$('.arrow.previous').css('left',offsetright);		
	}
	
	
});