var number_of_pictures = 34;    
  
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');   
    });  
  
});