jQuery(document).ready(function() {		
	//Execute the slideShow
    //largura, altura, altura do caption
	slideShow( 738, 282 );
});

var current;
var next;
var caption;
var heightCaption;

function slideShow( largura, altura ) {
    heightCaption = jQuery('#gallery .caption').css('height');
    
    //Set gallery Width and Height
    jQuery('#gallery').css({width: largura, height: altura, overflow:'hidden'});
    
	//Set the opacity of all images to 0
	jQuery('#gallery ul').css({opacity: 0.0});

	//Get the first image and display it (set it to full opacity)
	jQuery('#gallery ul:first').css({opacity: 1.0});

	//Set the caption background to semi-transparent
	jQuery('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	jQuery('#gallery .caption').css({width: jQuery('#gallery').css('width')});

	//Get the caption of the first image from REL attribute and display it
	jQuery('#gallery .content').html(jQuery('#gallery ul:first li.captionText').html()); 

	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',6000);
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	current = jQuery('#gallery ul.show') ?  jQuery('#gallery ul.show') : jQuery('#gallery ul:first');

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	next = ((current.next().length) ? ((current.next().hasClass('caption')) ? jQuery('#gallery ul:first') : current.next()) : jQuery('#gallery ul:first'));	

	//Get next image caption
	caption = next.find('li.captionText').html();

	//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
	jQuery('#gallery .caption')
        .animate({opacity: 0.0}, { queue:false, duration:0 })
        .animate({height: '0'}, { queue:true, duration:300 });
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	jQuery('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: heightCaption},500 );
	
	//Display the content
	jQuery('#gallery .content').html(caption);
}