var tempo = setInterval('gallery()',6000);

function slideShow() {

    //Set the opacity of all images to 0
    $('#slides a').css({opacity: 0.0});
    
    //Get the first image and display it (set it to full opacity)
    $('#slides a:first').css({opacity: 1.0});
    
    //Set the caption background to semi-transparent
    //$('#gallery .caption').css({opacity: 0.7});

    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#slides a').find('img').css('width')});
    
    //Get the caption of the first image from REL attribute and display it
    $texto = $('#slides a:first').attr('title');
    $url = $('#slides a:first').attr('link');
    $partes = $texto.split("|");
	$('#gallery .caption').html("<h3><a href='"+ $url +"' title='" + $partes[0] + "'>"+$partes[0]+"</a></h3> <h4>"+$partes[1]+"</h4>")
    
    
    if ($("#gallery a").length != 1) {
        
        $("#gallery").hover(
            function () {
                $(".botoes").css("display","block");
            }, 
            function () {
                $(".botoes").css("display","none");
            }
        );
        
        $(".botoes .anterior").click(function () { 
            voltar();
        });
        
        $(".botoes .proximo").click(function () { 
            gallery();
        });

        //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
		
    }
    
}

function voltar() {
    window.clearInterval(tempo);
    tempo = window.setInterval("gallery()",6000); 
 
    var current = $('#slides a.show');
	
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var prev = ((current.prev().length) ? ((current.prev().hasClass('botoes')) ? $('#slides a:last') : current.prev()) : $('#slides a:last'));  
	
	//console.log(prev)
    
    //Get next image caption
    var caption = prev.attr('title');  
    var url = prev.attr('link');  
    
    //Set the fade in effect for the next image, show class has higher z-index
    prev.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({height: '1px'}, 200, function() {
            //Animate the caption, opacity to 0.7 and heigth to 50px, a slide up effect
            $('#gallery .caption').animate({height: '50px'},500 );
            
            //Display the content
            $texto = caption;
            $partes = $texto.split("|");
            $('#gallery .caption').html("<h3><a href='"+ url +"' title='" + $partes[0] + "'>"+$partes[0]+"</a></h3> <h4>"+$partes[1]+"</h4>")
        }
    );  
}

function gallery() {
    window.clearInterval(tempo);
	tempo = window.setInterval("gallery()",6000); 
    
    //if no IMGs have the show class, grab the first image
    var current = ($('#slides a.show')?  $('#slides a.show') : $('#slides a:first'));

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#slides a:first') :current.next()) : $('#slides a:first'));
	
	//console.log(next)
    
    //Get next image caption
    var caption = next.attr('title');  
    var url = next.attr('link');  
    
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);

    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({height: '1px'}, 200, function() {
            //Animate the caption, opacity to 0.7 and heigth to 50px, a slide up effect
            $('#gallery .caption').animate({height: '50px'},500 );
            
            //Display the content
            $texto = caption;
            $partes = $texto.split("|");
            $('#gallery .caption').html("<h3><a href='"+ url +"' title='" + $partes[0] + "'>"+$partes[0]+"</a></h3> <h4>"+$partes[1]+"</h4>")
        }
    );  

}