window.addEvent('domready', function() {

	// project matrix and lightbox
	var numproj = 15;					// projects per line
	var widthproj = 129;				// total widht of every proejct item (incl. margin and borders)
	var scrollnumproj = 3;				// how many projects to scroll at once
	var scrolldiv1 = $('tubeitems');	// id of the first element to scroll
	
	// effects
	var slide1 = new Fx.Styles(scrolldiv1, {duration:600, wait:false, transition:Fx.Transitions.Quint.easeOut});
	
	// actions to perform on page load
	slide1.start({
		'margin-left': 0
	});
	
	$('btn_prev_vids').setStyle('opacity',.5);
	
	// matrix buttons events
	$('btn_next_vids').addEvent('click', function(event) {
		if(scrolldiv1.getStyle('margin-left').toInt() > 0-((widthproj*numproj)-(widthproj*scrollnumproj))) {
			var offset = scrolldiv1.getStyle('margin-left').toInt()-(widthproj*scrollnumproj);
			if(offset <= 0-((widthproj*numproj)-(widthproj*scrollnumproj))) {
				offset = 0-((widthproj*numproj)-(widthproj*scrollnumproj));
				$('btn_next_vids').setStyle('opacity',.5);
			} else {
				$('btn_next_vids').setStyle('opacity',1);
				$('btn_prev_vids').setStyle('opacity',1);
			}
			slide1.start({
				'margin-left': offset
			});
		};
	});
	
	$('btn_prev_vids').addEvent('click', function(event) {
		if(scrolldiv1.getStyle('margin-left').toInt() < 0) {
			var offset = scrolldiv1.getStyle('margin-left').toInt()+(widthproj*scrollnumproj);
			if(offset >= 0) { 
				offset = 0;
				$('btn_prev_vids').setStyle('opacity',.5);
			} else {
				$('btn_next_vids').setStyle('opacity',1);
				$('btn_prev_vids').setStyle('opacity',1);
			}	
			slide1.start({
				'margin-left': offset
			});
		};
	});	


});