// JavaScript Document

$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow();

});

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

	//Resize the width of the caption according to the image width
	//alert($('#gallery a').find('img').css('width'));
	//$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	//$('#gallery .caption').css({'width' : '180px'});
	$('#gallery .caption').css({'width' : '180px','padding-left' : '420px', 'padding-top' : '190px'});
	
		$('#gallery .content').css({ 'position' : 'absolute', 'font-size' : '18px','color':'#31849B','width':'180px','font-weight':'bold',
'border-top':'solid 2px #aaa','border-left':'solid 2px #aaa','border-right':'solid 2px #aaa', 'background':'#fff','z-index':'2'});
		$('#gallery .content-bottom').css({ 'position' : 'absolute','width' : '180px',
'border-left':'solid 2px #aaa','border-right':'solid 2px #aaa','border-bottom':'solid 2px #aaa', 'background':'#fff','height':'120px','font-size' : '12px', 'scroll':'auto','z-index':'0','z-index':'0'});
			//$('#gallery .content').css("","");
			//$('#gallery .content').css("","");
			
		//	$('#gallery ').css("position","absolute");
					
	//$('#gallery .content-bottom').css("padding-left","500px");
	
	//Get the caption of the first image from REL attribute and display it
	if (browserName=="Microsoft Internet Explorer")
		{
				//$('#gallery .caption').css({height: '25px'},500 );
				$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.9}, 400);
			$('#content-bottom').html($('#gallery a:first').find('img').attr('title')).animate({opacity: 0.9}, 400);
			
			
			$('#content-bottom').css({ 'position' : 'absolute','width' : '180px',
'border-left':'solid 2px #aaa','border-right':'solid 2px #aaa','border-bottom':'solid 2px #aaa', 'background':'#fff','height':'120px','font-size' : '12px', 'scroll':'auto','z-index':'0','z-index':'0'});
			
				//$('#gallery .caption-bottom').css({height: '35px'},500 );
		}
		else
		{
				//$('#gallery .caption').css({height: '15px'},500 );
				$('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({opacity: 0.9}, 400);
				$('#gallery .content-bottom').html($('#gallery a:first').find('img').attr('title')).animate({opacity: 0.9}, 400);
		}
		//alert($('#gallery a:first').find('img').attr('title'));
	//$('#gallery .caption').css('z-index','500');
	
	//document.getElementById('content-bottom-id').innerHTML='...because she hugs me!';
	//document.getElementById('content-bottom-id').innerHTML='...because she hugs me!';
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',15000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery 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'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	var title = next.find('img').attr('title');	
	
	//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');
	//$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
		$('#gallery .caption').css({'width' : '180px','padding-left' : '420px', 'padding-top' : '190px'});
	//Set the opacity to 0 and height to 1px
	//$('#gallery .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 100px, a slide up effect
	var browserName=navigator.appName; 
	//alert(browserName);
		if (browserName=="Microsoft Internet Explorer")
		{
				//alert(title);
			$('#gallery .caption').css({opacity: 1},100 ).css({height: '25px'},500 );
				//$('#gallery .caption').animate({opacity: 1},100 ).animate({height: '30px'},500 );
				
				//Display the content
				$('#gallery .content').html(caption);
				
							$('#gallery .content').css({ 'position' : 'absolute', 'font-size' : '18px','color':'#31849B','width':'180px','font-weight':'bold',
'border-top':'solid 2px #aaa','border-left':'solid 2px #aaa','border-right':'solid 2px #aaa', 'background':'#fff','z-index':'2'});
		$('#content-bottom').css({ 'position' : 'absolute','width' : '180px',
'border-left':'solid 2px #aaa','border-right':'solid 2px #aaa','border-bottom':'solid 2px #aaa', 'background':'#fff','height':'120px','font-size' : '12px', 'scroll':'auto','z-index':'0','z-index':'0'});
				
				
				//	$('#content-bottom').hide();
			//	$('#content-bottom').css("padding-top","180px");
				$('#content-bottom').html(title);
				//$('#content-bottom').show('slow');
				
				//alert(title);
				//document.getElementById('content-bottom-id').innerHTML=title;
				//$('#gallery .content-bottom').show();
		}
		else
		{
				//$('#gallery .caption').animate({opacity: 1},100 ).animate({height: '15px'},500 );
				//$('#gallery .caption').animate({opacity: 1},100 ).animate({height: '30px'},500 );
				
				//Display the content
				
				$('#gallery .content').html(caption);
				
						$('#gallery .content').css({ 'position' : 'absolute', 'font-size' : '18px','color':'#31849B','width':'180px','font-weight':'bold',
'border-top':'solid 2px #aaa','border-left':'solid 2px #aaa','border-right':'solid 2px #aaa', 'background':'#fff','z-index':'2'});
		$('#gallery .content-bottom').css({ 'position' : 'absolute','width' : '180px',
'border-left':'solid 2px #aaa','border-right':'solid 2px #aaa','border-bottom':'solid 2px #aaa', 'background':'#fff','height':'120px','font-size' : '12px', 'scroll':'auto','z-index':'0','z-index':'0'});
		
		
				$('#gallery .content-bottom').hide();
			//	$('#gallery .content-bottom').css("padding-left","500px");
				$('#gallery .content-bottom').html(title);
				$('#gallery .content-bottom').show();
		}

	
	
	
}