$(document).ready(function() {       
      
    //Execute the slideShow
    if($('#splash ul li').length>1)
    slideShow(); 
  
}); 

var splash='#splash',
	moving;
function slideShow() {
  	
    //Set the opacity of all images to 0 
    //$(splash+' li').css({opacity: 0.0});
	$(splash+' li').fadeOut('fast'); 
      
    //Get the first image and display it (set it to full opacity) 
    //$(splash+' li:first').css({opacity: 1.0}); 
    $(splash+' li:first').fadeIn('fast'); 
      
    //Set the caption background to semi-transparent 
    $(splash+' .caption').css({opacity: 0.7, height: 0});
	$(splash+' .caption:first').css({height:'40px'}); 
  
    //Resize the width of the caption according to the image width 
    //$(splash+' .caption').css({width: $(splash+' a').find('img').css('width')}); 
      
    //Get the caption of the first image from REL attribute and display it 
    //$(splash+' .content').html($(splash+' a:first').find('img').attr('rel')) 
    $(splash+' .content').animate({opacity: 0.7}, 400); 
      
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds 
    moving=setInterval('gallery()',6000);
    
    $(splash+' .next').click(function(e){
    	e.stopPropagation();
    	next();
    });
    
    $(splash+' .prev').click(function(e){
    	e.stopPropagation();
    	prev();
    });
    
    $(splash).mouseover(function(){
    	pause();
    });
    
    $(splash).mouseleave(function(){
    	start();
    });
}

function show_arrow(){
	$(splash+' .next, '+splash+' .prev').show();	
}

function hide_arrow(){
	$(splash+' .next, '+splash+' .prev').hide();	
}


function pause(){
	show_arrow();
	clearInterval(moving);
}

function start(){
	hide_arrow();
	moving=setInterval('gallery()',6000);
}

function next(){
	//alert('next');
	clearInterval(moving);
	gallery();
	moving=setInterval('gallery()',6000);
}

function prev(){
	//alert('prev');
	clearInterval(moving);
	prev_gallery();
	moving=setInterval('gallery()',6000);
}
  
function gallery() {
      
    //if no IMGs have the show class, grab the first image 
    var current = ($(splash+' li.show')?  $(splash+' li.show') : $(splash+' li: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'))? $(splash+' li:first') :current.next()) : $(splash+' li: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}) 
    next.css({display:'none'})
    .addClass('show') 
    //.animate({opacity: 1.0}, 1000);
	.fadeIn('slow'); 
  
    //Hide the current image 
    //current.animate({opacity: 0.0}, 1000) 
    current.fadeOut('slow') 
    .removeClass('show');
    
    //alert(current.children('label').width());
    $(splash+' .white').width(next.children('label').width());
    //Set the opacity to 0 and height to 1px 
    $(current.children('.caption')).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '0px'}, { queue:true, duration:300 });  
      
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
    $(next.children('.caption')).animate({opacity: 0.7},100 ).animate({height: '40px'},500 ); 
      
    //Display the content 
    //$(splash+' .content').html(caption);        
}

function prev_gallery(){
      
    //if no IMGs have the show class, grab the first image 
    var current = ($(splash+' li.show')?  $(splash+' li.show') : $(splash+' li:last')); 
  
    //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('caption'))? $(splash+' li:last') :current.prev()) : $(splash+' li:last'));    
      
    //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}) 
    prev.css({display:'none'})
    .addClass('show') 
    //.animate({opacity: 1.0}, 1000);
	.fadeIn('slow'); 
  
    //Hide the current image 
    //current.animate({opacity: 0.0}, 1000) 
    current.fadeOut('slow') 
    .removeClass('show');
    
    //alert(current.children('label').width());
    $(splash+' .white').width(prev.children('label').width());
    //Set the opacity to 0 and height to 1px 
    $(current.children('.caption')).animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '0px'}, { queue:true, duration:300 });  
      
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect 
    $(prev.children('.caption')).animate({opacity: 0.7},100 ).animate({height: '40px'},500 ); 
      
    //Display the content 
    //$(splash+' .content').html(caption);	
}