var number_of_pictures = 120; 

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(){
				if (this.id=='image_1'){
					$('display_picture_img').innerHTML = "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='444' height='333' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='eco.swf' /><param name='quality' value='high' /><param name='wmode' value='transparent' /><param name='bgcolor' value='#ffffff' /><embed src='eco.swf' quality='high' wmode='transparent' bgcolor='#ffffff' width='444' height='333' name='Eco' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><center><font color='#29420B'><b>Cerrar Video</b></font></center>";
					$('display_picture_container').fade(1);
					//$('big_picture').fade(.999999);
					//$('controls_vert').setStyle('display', 'none');
					}else{
					$('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_', '')==2) {
						$('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', '245px'); }
				}
			}			
		});
		

		
		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', '-'+ (130 * 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', '-'+ (130 * 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==2) { $('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==3) { $('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', '245px'); }
		$('controls_horz').setStyle('display', 'none');
		$('controls_vert').setStyle('display', 'block');
		$('left').tween('margin-left', '7px');
		$('up').tween('margin-left', '7px');
	});

});