//als slechts 1 fade galerij 
/*
var array=new Array("#gallery1");
var speed = new Array(1000,);
*/
//

//var array=new Array("#gallery1","#gallery2");
//var speed = new Array(2000, 2000);

$(document).ready(function() {
	
  	slideShow0();
  	slideShow1();
  	slideshow2();
  	

});

function slideShow0() {
	
	
		//Set the opacity of all images to 0
		$('#gallery1 a').css({opacity: 0.0});
		
		//Get the first image and display it (set it to full opacity)
		$('#gallery1 a:first').css({opacity: 1.0,'z-index' : 1}).addClass('show');
		
		setInterval("gallery0()", 6000); 
	
}

function gallery0() {
	
		//var current = ($('#bannerfoto a.show')?  $('#bannerfoto a.show') : $('#bannerfoto a:first'));
		//if no IMGs have the show class, grab the first image
		var current = ($('#gallery1 a.show')?  $('#gallery1 a.show') : $('#gallery1 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'))? $('#gallery1 a:first') :current.next()) : $('#gallery1 a:first'));	
	//	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $(array[i] +' a:first') :current.next()) : $(array[i] +' a:first'));	
		//Set the fade in effect for the next image, show class has higher z-index
		next.css({'opacity': 0.0, 'z-index' : 1})
		.addClass('show')
		.animate({opacity: 1.0},  4000);
	
		//Hide the current image
		current.animate({opacity: 0.0}, 1000)
		.removeClass('show').css({'z-index' : 0 });
	}
	



function slideShow1() {
	
	
	//Set the opacity of all images to 0
	$('#gallery2 a').css({opacity: 0.0}).removeClass('show');
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery2 a:first').css({opacity: 1.0, 'z-index' : 1}).addClass('show');
	
	setInterval("gallery1()", 6000); 

}

function gallery1() {


	var current = ($('#gallery2 a.show')?  $('#gallery2 a.show') : $('#gallery2 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'))? $('#gallery2 a:first') :current.next()) : $('#gallery2 a:first'));	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0,'z-index' : 1})
	.addClass('show')
	.animate({opacity: 1.0},  4000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show').css({'z-index' : 0 });
}


	

function slideshow2() {
	
	//Set the opacity of all images to 0
	$('#bannerfoto a').css({opacity: 0.0}).removeClass('show');
	
	//Get the first image and display it (set it to full opacity)
	$('#bannerfoto a:first').css({opacity: 1.0}).addClass('show');
	
	//Get the caption of the first image from REL attribute and display it
	$('#bannerfoto .content').html($('#bannerfoto a:first').find('img').attr('rel')) ;
	
	$('#bannerfoto a img').hover(function(){
			//open on hover
			 $('#bannerfoto .caption').stop().animate({top:'290px', opacity: 0.7},{queue:false,duration:300});
				}, 
			function() {
			$('#bannerfoto .caption').stop().animate({top:'320px', opacity: 0.7},{queue:false,duration:300});
		});
	//Call the bannerfoto function to run the slideshow2, 6000 = change to next image after 6 seconds
	
		setInterval("bannerfoto()", 5000); 
	
	
}

function bannerfoto() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#bannerfoto a.show')?  $('#bannerfoto a.show') : $('#bannerfoto a:first'));

	//Get next image, if it reached the end of the slideshow2, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#bannerfoto a:first') : current.next()) : $('#bannerfoto 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,'z-index' : 1})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show').css({'z-index' : 0 });
	
	//Set caption in start position
	$('#bannerfoto .caption').animate({opacity: 0.0}, 0).animate({height: '30px', top: '320px'}, 0);
	
	//fill caption with content 
	$('#bannerfoto .content').html(caption);
	
	$('#bannerfoto a img').hover(function(){
		 $('#bannerfoto .caption').stop().animate({top:'290px',opacity: 0.7},{queue:false,duration:300});
			}, 
		function() {
		 $('#bannerfoto .caption').stop().animate({top:'320px', opacity: 0.7},{queue:false,duration:300});
	});
}