var slides;
var currSlide;
var nextSlide;
var numSlides;
var sliderTimer = 5000;
var slideTransition = 1500;
var slideBaseZindex = 5;

$(document).ready(function() {

	// FADING SLIDER INIT
	slides = $('#slides .slide');
	numSlides = slides.length;
	currSlide = 0;
	nextSlide = 1;
	
	setInterval('basicFadingSlider()', sliderTimer);
						   
});

function basicFadingSlider() {
	
	if(nextSlide > numSlides-1) {
		nextSlide = 0;	
	} 
	
	basicFadeSlideOut(slides[currSlide]);
	basicFadeSlideIn(slides[nextSlide]);
	
	currSlide = nextSlide;
	nextSlide = currSlide+1;
	
}

function basicFadeSlideOut(el) {
	
	$(el).css('z-index', slideBaseZindex);
	
	$(el).animate({
		opacity: 0		  
	}, slideTransition, 'swing', function() {$(el).css('display', 'none');})
	
}

function basicFadeSlideIn(el) {
	
	$(el).css('z-index', slideBaseZindex+1);
	$(el).css('opacity', 0);
	$(el).css('display', 'block');
	
	$(el).animate({
		opacity: 1		  
	}, slideTransition, 'swing', function() {})
	
}