var slider;
var slide_items;
var slide_count;
var n;
var full_width;


// Background Slider Function
function bg_slider() {
	
	//if only one image, bail
	if(slide_count < 2) {
		return false;
	}

	//if it's the last image, put 1st image back in place
	if(n == slide_count) {
		jQuery("#item1").css("width",full_width);
		jQuery("#item1").css("z-index",0);
	}
	//after the last image, put the rest back in place and reset count
	if(n > slide_count) {
		slide_items.each(function() {
			jQuery(this).css("width",full_width);
			jQuery(this).css("z-index",0);
		});
		n = 1;
	}
	
	slide_items.each(function() {
		jQuery(this).css("visibility","visible");
	}).delay(4000);
	
	//make sure current image is on top
	jQuery("#item"+n).css("z-index",1);
	//animate it!
	jQuery("#item"+n).delay(4000).animate({width: 0}, 2000, 'easeOutQuad', bg_slider);
	n++;
}


jQuery(document).ready(function() {
		slider = jQuery("#bgSlider");
		slide_items = jQuery("#bgSlider .slideItem");
		slide_count = slide_items.length;
		full_width = slider.width();
		n = 1;	
		
		// show 1st item immediately
		jQuery("#item1").css("visibility","visible");
		
		// once 1st image is fully loaded, 'show' the rest and call slider function (hopefully 2nd image is loaded by now, and so on)
		
		if(jQuery("#item1 img")) {
			bg_slider();
		}
});