$(function(){
	if(document.getElementById('leftcol').getElementsByTagName('img').length > 1){
	
		// specific: prepare html & css ground
		var containers = $('#leftcol center');
		$(containers).wrap('<div class="glob"><div class="ribbon"></div></div>');
		$('br', containers).remove();

		// set used variables
		var Container = $('.glob');
		var ElementWidth = 124;
		var Spoonful = 3; // nb of elements to slide at a time
		var Plateful = 4; // ± nb of elements displayed at a time
		var LimitToright = parseInt(ElementWidth *(-1));
		var MoveLeft = '-='+ElementWidth*Spoonful;
		var MoveRight = '+='+ElementWidth*Spoonful;
		var ElementCount = new Array();
		var LimitToleft = new Array();
		var Slider = new Array();
		for(i=0; i<Container.length; i++){
			loc_cont = Container[i];
			Slider[i] = $('.ribbon', loc_cont);
			ElementCount[i] = $('a', loc_cont).length;
			LimitToleft[i] = parseInt((ElementCount[i] - Spoonful) * ElementWidth * (-1));
			// another load of css, but only if slide is needed
			if(ElementCount[i] > Plateful){
				ElementCount[i]%3 == 0 ? addval = 0 : addval = ElementCount[i]%3;
				$(Slider)[i].css({ width:ElementWidth*(ElementCount[i]+addval) });
			}
			else{
				$(Slider)[i].css({ width:'498px' });
			}
		}
		
		// onload allow sliding only if necessary
		for(i=0; i<=Container.length; i++){
			var cur = Container[i];
			if(ElementCount[i] > 4){
				$(cur).prepend('<span class="toright" style="z-index:3;"></span>').append('<span class="toleft" style="visibility:hidden;z-index:3;"></span>');
			}
		}
		
		// create functions(slideLeft): slide to left (uncover right): $(LimitToleft), $('.toright')
		var slideLeft = function(){
			var loc_glob = $(this).parents('.glob');
			var loc_container = $('.ribbon', loc_glob);
			var nb = $('.ribbon').index(loc_container);
			var margleft = parseInt($(loc_container).css('left'));
			if(margleft > LimitToleft[nb]){
				$('.toright').unbind('click');
				$(loc_container).animate({left: MoveLeft}, 350, function(){
					$('.toright').bind('click',slideLeft);
					// play with arrows' visibility
					$('.toleft', loc_glob).css('visibility', 'visible');
					if($(loc_container).width()-margleft <= Spoonful*ElementWidth-21){
						$('.toright', loc_glob).css('visibility', 'hidden');
					}
					else{
						$('.toright', loc_glob).css('visibility', 'visible');
					}
				});
			}
			else{
				$('.toright', loc_glob).css('visibility', 'hidden');
			}
		};
		
		// create functions(slideRight): slide to right (uncover left): $(LimitToright), $('.toleft')
		var slideRight = function(){
			var loc_glob = $(this).parents('.glob');
			var loc_container = $('.ribbon', loc_glob);
			var margleft = parseInt($(loc_container).css('left'));
			if(margleft <= LimitToright){
				$('.toleft').unbind('click');
				$(loc_container).animate({left: MoveRight}, 350, function(){
					$('.toleft').bind('click',slideRight);
				});
				// play with arrows' visibility
				$('.toright').css('visibility', 'visible');
				if(margleft*(-1) == 570 ){
					$('.toleft', loc_glob).css('visibility', 'hidden');
				}
				else{
					$('.toleft', loc_glob).css('visibility', 'visible');
				}
			}
			else{
				$('.toleft', loc_glob).css('visibility', 'hidden');
			}
		};
		
		// bind functions
//		$(Container).click(function(){
			$('.toright', Container).bind('click', slideLeft);
			$('.toleft', Container).bind('click', slideRight);
//		});
		
		// add a little shine to photo mouseover
		$('a', Container).fadeTo(0, 0.8);
		$('a', Container).hover(
			function(){	$(this).fadeTo(75, 1.0);	},
			function(){	$(this).fadeTo(75, 0.8);	}
		);
		
	}
	else{ /*forget it*/}

}); // end main function