$(function(){
	var totaalKolom=$('.event').length;
	var totaalJaar=$('.scrollPoints').length;
	var jaar_width = 120;//breedte+20
	var kolom_width = 293;//breedte+18
	var screenWidth = $(document).width();
	
	var tijdlijn_width = kolom_width*totaalKolom; /* screenwidth eraf voor max margin-left*/
	var tijdlijn_jaren_width = jaar_width*totaalJaar;	
	
	$('#tijdlijnScroll').width(tijdlijn_width); //tijdlijn scroll breedte zetten
	$('#jarenscroll').width(tijdlijn_jaren_width); //jarenlijn scroll breedte zetten		
	
	var scrollPane = $('#tijdlijnLimiter');
	var scrollContent = $('#tijdlijnScroll');
	
	var scrollPaneTijd = $('#tijdlijnLimiter'); 
	var scrollContentTijd = $('#jarenscroll');	
	var highlight = $('#highlight');		
	
	if(totaalKolom>0){
		if(tijdlijn_width > scrollPane.width())/* Als de tijdlijn groter is dan oveflow div*/
		{
			//$('#centered').width(jaar_width*totaalKolom);		
							
			var scrollbar = $('.scroll-bar').slider({
				animate: 'fast',
				orientation: 'horizontal',
				slide:function(e, ui){
					if( scrollContent.width() > scrollPane.width() ){ 
						scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px'); 
					}else{
						scrollContent.css('margin-left', 0); 
					}
					
					if( scrollContentTijd.width() > scrollPaneTijd.width() ){ 
						scrollContentTijd.css('margin-left', Math.round( ui.value / 100 * ( scrollPaneTijd.width() - scrollContentTijd.width() )) + 'px'); 
					}else{
						scrollContentTijd.css('margin-left', 0); 
					}						
					
					highlight.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - highlight.width())) + 'px');
				}
			});				
	
			$('#highlight').width((jaar_width/kolom_width)*scrollPane.width()-3);
		}
		
		$('.eventList li').click(function(){
			loadAjax("timeline/tmpl/foto_overzicht.php", {item_id:$(this).attr('id')});									
		});
			
		//icoon in scrollbar drag element
		var handleHelper = scrollbar.find('.ui-slider-handle').append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>').wrap('<div class="ui-handle-helper-parent"></div>').parent();
		
		scrollPane.css('overflow','hidden');
	
		function sizeScrollbar(){
			var remainder = scrollContent.width() - scrollPane.width();
			var proportion = remainder / scrollContent.width();
			var handleSize = scrollPane.width() - (proportion * scrollPane.width());
			scrollbar.find('.ui-slider-handle').css({
				width: handleSize,
				'margin-left': -handleSize/2
			});
			handleHelper.width('').width( scrollbar.width() - handleSize);
		}
	
		setTimeout(sizeScrollbar,10);		//scrollbar breedte aanpassen met kleine timeout / safari
	}
});