var current_banner = 0;
var total_banners = 0;
var animation_duration = 500;
var slide_duration = 5000;
var slideshow_callback;
var slideshow_loaded_callback;

var show_banner = function(x) {
    if (x >=total_banners) { x=0; }
    // set all banners NOT current or next to z-index 80 (BOTTOM of STACK)
    $('#banners .banner').not('.current,.next').css({"z-index":"80"}); 

    $('#banners .current').css("z-index","81");		// set CURRENT banner to z-index of 81, just above other banners @ 80

	$('#banner'+x)											//for our NEXT/SLIDING IN banner, 
        .addClass('next')									// add class of next
        .css({"left":"250px","z-index":"90"})				// set off to the right, set z-index to TOP
        .animate(
            {"left":"0px"},									// slide to the left over 1s
            {
                duration: animation_duration,
                complete:function() { 			//when complete, set the CURRENT to zindex of 80, remove class of current
                        	$(".current").css("z-index","80").removeClass("current"); 
                        	$(this).addClass("current").removeClass('next'); //and change NEXT to CURRENT, remove NEXT
							$('.current h3').fadeIn(200);
                        } 
                        
            }
        );
		current_banner = x;

	
 
	if(typeof slideshow_callback == 'function') {
		slideshow_callback();
	}
};

$(document).ready(function() { 

	//slideshow = window.setInterval(function() { show_banner(current_banner + 1); }, slide_duration);
    
    $('#banners .banner').each(function(i,banner) {
        total_banners++;
        banner.id = "banner" + (i);	//give each banner a unique ID for utility
    });
    
	$('#app_slideshow_left').click(function()  { /*clearInterval(slideshow);*/ show_banner(current_banner-1); });
	$('#app_slideshow_right').click(function() { /*clearInterval(slideshow);*/ show_banner(current_banner+1); });
    
    
});