var number_of_pictures = 38;   
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');  
                    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++;  
    }  
}  
window.addEvent('domready', function() {      
    show_pictures();  
    $('display_picture_container').fade('hide');
    var vertical_moves = 0;  
var rows = Math.ceil(number_of_pictures/5);  
if(rows>5) {  
    $('up').addEvent('click', function(event){  
        if(!$('up').hasClass('deactivated')) {  
            vertical_moves--;  
            $('down').erase('class');  
            $('inside').tween('margin-top', '-'+ (64 * vertical_moves) +'px');  
            if (vertical_moves==0) {  
                $('up').set('class', 'deactivated');  
            }  
        }  
    });  
    $('down').addEvent('click', function(event){  
        if(!$('down').hasClass('deactivated')) {  
            vertical_moves++;  
            $('up').erase('class');  
            $('inside').tween('margin-top', '-'+ (64 * vertical_moves) +'px');  
            if(vertical_moves == (rows-5)) {  
                $('down').set('class', 'deactivated');  
            }  
        }  
    });  
} else {  
    $('up').set('class', 'deactivated');  
    $('down').set('class', 'deactivated');  
}  
var current_id = 1;  
$('left').addEvent('click', function(){  
    if(!$('left').hasClass('deactivated')) {  
        current_id = $('big_picture').get('class').replace('image_', '');  
        current_id--;  
        $('big_picture').fade('hide');  
        $('big_picture').set('src', 'pictures/' + current_id + '.jpg');  
        $('big_picture').fade(1);  
        $('big_picture').set('class', 'image_' + current_id);  
        if(current_id==1) { $('left').set('class', 'deactivated'); }  
        if(current_id==(number_of_pictures-1)) { $('right').erase('class');  }  
    }  
});  
$('right').addEvent('click', function(){  
    if(!$('right').hasClass('deactivated')) {  
        current_id = $('big_picture').get('class').replace('image_', '');  
        current_id++;  
        $('big_picture').fade('hide');  
        $('big_picture').set('src', 'pictures/' + current_id + '.jpg');  
        $('big_picture').fade(1);  
        $('big_picture').set('class', 'image_' + current_id);  
        if(current_id==2) { $('left').erase('class'); }  
        if(current_id==number_of_pictures) { $('right').set('class', 'deactivated'); }  
    }  
});
    $('display_picture_img').addEvent('click', function(){  
        $('display_picture_container').fade(0);  
        $('big_picture').fade(0);  
        if(Browser.Engine.trident4) { $('up').setStyle('margin-left', '143px'); } else { $('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');  
    });    
});