(function($) {
	var gallery 	= '.car-gallery';
	var thumbnails  = gallery + ' .scroller img';
	var picture 	= gallery + ' .image img';
	
	// buttons
	var btPrev 		= gallery + ' .gallery-left';
	var btNext 		= gallery + ' .gallery-right';
	
	// state variable
	var currentImageNum = 1;
	var maxImageNum		= undefined;
	
	var _get_image_num = function( num ) {
		return $(thumbnails + '[num="' + num + '"]' );		
	};
	
	var carid = null;
	
	$().ready( function() {
		// get last image:
		maxImageNum = parseInt($(thumbnails+':last').attr('num'));
		
		carId = $(gallery + ' .garage-car-gallery').attr('carid');
		
		// bind clicking on thumbnails
		$(thumbnails).click( function(){
			var bigImage 	= $(this).attr('big');
			currentImageNum = parseInt( $(this).attr('num') ); // assert that this is numeric. 
			$(picture).attr('src', bigImage);
			
			counterpixel( paid, carId );
		});
		
		// bind previous and next
		$(btPrev).click( function(){
			currentImageNum--; if( currentImageNum < 1 ) { currentImageNum = maxImageNum; }
			
			var bigImage = $(_get_image_num(currentImageNum)).attr('big'); 
			$(picture).attr('src', bigImage );
			
			counterpixel( paid, carId );
		});
		
		$(btNext).click( function(){
			currentImageNum++; if( currentImageNum > maxImageNum ) { currentImageNum = 1; }

			var bigImage = $(_get_image_num(currentImageNum)).attr('big'); 
			$(picture).attr('src', bigImage );
			
			counterpixel( paid, carId );
		});
	});
})(jQuery);