$(document).ready(function() {		
	// ********** IMPORTANT *********************					   
	// only display gallery after 3250 milliseconds as otherwise loading images may appear to flicker past fast
 
    setTimeout('document.getElementById("gallery").style.display = "block"',100);
    setTimeout('document.getElementById("gallery3").style.display = "block"',100);
	setTimeout('document.getElementById("gallery2").style.display = "block"',100);


	// hide background image which only needs to be displayed prior to loaded images
	// otherwise will appear in between image slideshow fade ins fade outs
	// CHANGE the delay to make background stay longer or shorter duration
    setTimeout('document.getElementById("gallery-backround-img").style.display = "none"',7250);	
    setTimeout('document.getElementById("gallery2-backround-img").style.display = "none"',7250);
    setTimeout('document.getElementById("gallery3-backround-img").style.display = "none"',7250);

	
	// ********** IMPORTANT *********************

	//Execute the slideShow
	slideShow('#gallery',1); // 0 TO HIDE CAPTIONS ANIMATION,  1 TO SHOW (also remove/set display: none; in gallery. class)
	slideShow('#gallery2',1);
	slideShow('#gallery3',1);

	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery("#gallery",1)',4000); // 0 TO HIDE CAPTIONS ANIMATION,  1 TO SHOW (also remove/set display: none; in gallery. class)
	setInterval('gallery("#gallery2",1)',5000);
	setInterval('gallery("#gallery3",1)',6000);
});

function slideShow(param1, hide) {

	//Set the opacity of all images to 0
	$(param1+' a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	//REMARKED THIS LINE BECAUSE FIRST IMAGE WAS APPEARING TWICE
	//$(param1+' a:first').css({opacity: 1.0});
	
if (hide == 0){
	//Set the caption background to semi-transparent
	$(param1+' .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$(param1+' .caption').css({width: $(param1+' a').find('img').css('width')});
	
}
	//Get the caption of the first image from REL attribute and display it
	$(param1+' .content').html($(param1+' a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	

	
}

function gallery(param1, hide) {
	
	//if no IMGs have the show class, grab the first image
	var current = ($(param1+' a.show')?  $(param1+' a.show') : $(param1+' 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'))? $(param1+' a:first') :current.next()) : $(param1+' a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//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');
	
	if (hide == 0){
	   //Set the opacity to 0 and height to 1px
	   $(param1+' .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	   //Animate the caption, opacity to 0.7 and heigth to 50px, a slide up effect
	   $(param1+' .caption').animate({opacity: 0.7},100 ).animate({height: '50px'},500 );
	
    	//Display the content
	    $(param1+' .content').html(caption);
	
	}
	
}