var number_of_pictures = 26; 

function show_pictures () {
	var while_pictures = 1;
	while(while_pictures <= number_of_pictures) {
		var new_image = new Element('img', {
			'src': 'thumbs/' + while_pictures + '.png',
			'id': 'image_' + while_pictures,
			'events': {
				'click': function(){
					$('display_picture_img').innerHTML = "<img src=\"" + this.src.replace('thumbs/', 'pictures/') + "\" id=\"big_picture\" class=\"" + this.id + "\" />";
					$('display_picture_container').fade(1);
					pos = $('container').getPosition();
					$('display_picture_container').setStyle('top',pos.y);
					$('display_picture_container').setStyle('left',pos.x);
					$('display_picture_img').setStyle('top',pos.y+4);
					$('display_picture_img').setStyle('left',pos.x+30);
					//$('display_picture_container').setStyle('top', $(container));
					$('big_picture').fade(.999999);
					$('controls_vert').setStyle('display', 'none');
					
					if(this.id.replace('image_', '')==1) {
						$('left').set('class', 'deactivated');	
						$('right').erase('class');	
					} else if(this.id.replace('image_', '')==number_of_pictures) {
						$('left').erase('class');	
						$('right').set('class', 'deactivated');	
					} else {
						$('left').set('class', 'activated');	
						$('right').erase('class');
					}
					
					$('controls_horz').setStyle('display', 'block');
					
					if(Browser.Engine.trident4) { $('left').tween('margin-left', '143px'); } else { $('left').tween('margin-left', '286px'); }
				}
			}
		});
		
		new_image.inject($('inside'));
		
		// preload all of the images
		var preload_image = new Element('img', {
			'src': 'pictures/' + while_pictures + '.jpg',
			'class': 'hide'
			
		});
		preload_image.inject($('container'));
		
		// NOTE: I didn't create an alt attribute because it won't be seen by anyone here anyway.
		while_pictures++;
	}
	
}