function big_picture(foto,el,number_of_pictures){
    $('controls_horz').setStyle('display', 'block'); 
    i=el.id.replace('image_', '');
    i--;
    $('display_picture_img').innerHTML = "<img align='center' src=\"fotos/" + foto[i]['srcG'] + "\" id=\"big_picture\" class=\"image_" + (i+1) + "\" />";
    if(foto[i]['texto']!=''){
        $('texto').innerHTML = "<h2>MAS INFORMACI&Oacute;N</h2>"+foto[i]['texto'];
        $('texto').setStyle('display','block');
    }else{
      $('texto').setStyle('display','none');
    }
    $('display_picture_container').fade(1);
    $('big_picture').fade(.999999);
    $('controls_vert').setStyle('display', 'none');
    
    if(el.id.replace('image_', '')==1) {
        $('left').set('class', 'deactivated');    
        $('right').erase('class');    
    } else if(el.id.replace('image_', '')==number_of_pictures) {
        $('left').erase('class');    
        $('right').set('class', 'deactivated');    
    } else {
        $('left').set('class', 'activated');    
        $('right').erase('class');
    }
    $('big_picture').addEvent('click',function(){
            if(i==(number_of_pictures)){
               big_picture(foto,$('image_1'),number_of_pictures);
            }
            else{
               pos=1+i;
               big_picture(foto,$('image_'+pos),number_of_pictures);
            }
            
            
        });                
    
     i++;
   $$('#controls span').each(function(ele){if(ele.hasClass('active'))ele.removeClass('active')});
  $("button_"+i).addClass('active'); 
   /* if(Browser.Engine.trident4) { $('left').tween('margin-left', '143px'); } else { $('left').tween('margin-left', '300px'); } */
}
function show_pictures (foto) {
	var i = 0;
    var number_of_pictures = foto.length;  
	
    
    var new_image1 = new Element('img', {
            'src': 'fotos/' + foto[i]['src'],
            'id': 'image_' + (i+1)
    });
          
    while(i < foto.length) {
        var image_cont= new Element('div',{
            'id':'image_cont'+i,
            'class':'image_cont'
            });
		var new_image = new Element('img', {
			'src': 'fotos/' + foto[i]['src'],
			'id': 'image_' + (i+1),
            'alt': foto[i]['texto'],
			'events': {
				'click': function(){

					big_picture(foto,this,number_of_pictures);
                     
  
				}
			}
		});
		var picture_buttom=new Element('span',{
            'html':i+1,
            'id':'button_'+(i+1),
            'events':{
                'click':function(){
                
                    el=this.id.replace('button','image');
                    el=$(el);
                    big_picture(foto,el,number_of_pictures);
                       
                }
            }
        });
        image_cont.inject($('inside'));
		new_image.inject($('image_cont'+i));
		picture_buttom.inject($('controls_horz'));
		// preload all of the images
		var preload_image = new Element('img', {
			'src': 'fotos/' + foto[i]['srcG'],
			'class': 'hide'
			
		});
		preload_image.inject($('container'));
		$('button_1').addClass('active');
		// NOTE: I didn't create an alt attribute because it won't be seen by anyone here anyway.
		i++;
	}
    big_picture(foto,new_image1,number_of_pictures);  
	
}
window.addEvent('domready', function() {	
	
    var jsonRequest = new Request.JSON({
        url: "includes/fotogaleria_request.php",
        onComplete: function(foto){ 
            show_pictures(foto);
            var current_id = 1;
            var number_of_pictures=foto.length;
             $('left').addEvent('click', function(){
                if(!$('left').hasClass('deactivated')) {
                    current_id = $('big_picture').get('class').replace('image_', '');
                    current_id--;

                    big_picture(this,$('image_'+current_id),number_of_pictures);

                } 
            }.bind(foto));
            $('right').addEvent('click', function(){
                if(!$('right').hasClass('deactivated')) {
                    current_id = $('big_picture').get('class').replace('image_', '');
                    current_id++;
                    
                    big_picture(this,$('image_'+current_id),number_of_pictures);

                } 
            }.bind(foto));
        
            $('display_picture_container').fade('hide');
    
            var vertical_moves = 0;
            var rows = Math.ceil(number_of_pictures/5);
            
            
            if(rows>4) {
            
                $('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');    
            }
            
            
            
            $('thumbnails').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').tween('margin-left', '7px');
                $('up').tween('margin-left', '7px');
            });
            $('titulo').innerHTML=foto[0]['titulo']; 
        }
}).post({'id': id,'tabla':tabla});
});