// JavaScript Document
$(document).ready(function(){

// configuration parameters with defaults	
var width = 750;
var height = 500;
var showInterval = 3000;	
var fadeSpeed = 1000;  // should be set less then to showInterval

// function declarations
function init(){
  // set first img in foreground and second img as background first
	var el1 = $('#slideshow ul li img').first().attr('src'); // get first img filename from list
  $('#slideshowForeground').attr('src',el1);
  var el2 = $('#slideshow ul li:nth-child(2) img').attr('src'); // get second img filename from list	
  $('#slideshowBackground').css('background-image', 'url(' + el2 + ')'); 
	
}


function showNextImg(){
	// This function takes a list div-ul-li-img and shows each img for a set time
	
	// update the list by moving first item to the end
	var el = $('#slideshow ul li').first(); // save first element
	$('#slideshow ul li').first().remove(); // remove first element	
  $('#slideshow ul').append(el);		// append first element to tail of list
	var nextImage = $('#slideshow ul li img').first().attr('src'); // get first img filename from list

	// alternate between foreground and background image visibility
	var foregroundVisible = ($('#slideshowForeground').css('opacity') == 1);
  if (foregroundVisible) {
		// set background to next image (first in list now)
		$('#slideshowBackground').css('background-image', 'url(' + nextImage + ')'); 
		// fadeIn background by changing foreground opacity to 0
		$('#slideshowForeground').fadeTo(fadeSpeed,0);
	}
	else
	{
		// set foreground to next image
		$('#slideshowForeground').attr('src',nextImage);
		// fadeIn foreground by changing foreground opacity to 1
		$('#slideshowForeground').fadeTo(fadeSpeed,1);
	}
}


// Main
  init();
	$('#thumbSize p').bind(
	  'click',
		function(){
		  $('#thumbs img').toggleClass('smallThumbs');
		}
	)
	
  setInterval(showNextImg,showInterval);
}); // the end