var number_of_pictures = 4;    
  
function show_pictures () {   
    var while_pictures = 1;   
    while(while_pictures <= number_of_pictures) {   
        var new_image = new Element('img', {   
            'src': 'thumbs/' + while_pictures + '.jpg',   
            '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);   
                    $('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');   
                    $('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++;   
    }   
  
}   
window.addEvent('domready', function() {       
  
    show_pictures();   
  
    $('display_picture_container').fade('hide');  
	
	$('display_picture_img').addEvent('click', function(){   
        $('display_picture_container').fade(0);   
        $('big_picture').fade(0);   
        $('up').setStyle('margin-left', '286px');   
        $('controls_horz').setStyle('display', 'none');   
        $('controls_vert').setStyle('display', 'block');   
        $('left').setStyle('margin-left', '7px');   
        $('up').tween('margin-left', '7px');   
    });  

  
});