var current_banner = 0;
var total_banners = 0;
var animation_duration = 500;
var slide_duration = 7000;
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)
    $('#home_banners .banner').not('.current,.next').css({"z-index":"80"}); 
    
    //set banner nav item to selected
    $('#banner_nav a').each(function(i) { $(this).toggleClass('selected',i==x); }); 

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

	$('#banner'+x)											//for our NEXT/SLIDING IN banner, 
        .addClass('next')									// add class of next
        .css({"left":"960px","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
							$('.copy'+(x+1)).addClass("current_copy").fadeIn(1000,function(){ $('.copy'+(x+1)); });
                        } 
                        
            }
        );
		current_banner = x;

	$('#Left, #Right').hide();
	
	if (current_banner + 1 < total_banners) {
		$('#Slideshow #Right').show();
	}
	
	if (current_banner  > 0 ) {
		$('#Slideshow #Left').show();
	}
 
	if(typeof slideshow_callback == 'function') {
		slideshow_callback();
	}
};

$(document).ready(function() { 
	$("#HTMLSlideshow").show();

	 slideshow = window.setInterval(function() { show_banner(current_banner + 1); }, slide_duration);
    
    $('#home_banners .banner').each(function(i,banner) {
        total_banners++;
        banner.id = "banner" + (i);	//give each banner a unique ID for utility
        $('#banner_nav').append(	//add nav items to banner nav
            $('<a></a>')					//create link 			<a></a>
                .html(i+1)					//set link html to #x - <a>1</a>
                .attr('href','#')			//set link href to #  - <a href="#">1</a>
                .click(function() { 		//on link CLICK 
							clearInterval(slideshow); //stop rotation on click
                            show_banner(i); //show banner #i
                        })
                .toggleClass('selected',!i) //if this is banner #0, set selected
        );
    });
    
	$('#Slideshow').hover(function() { 
		$('#Arrows').show();
	},function() {$('#Arrows').hide()});
	
	$('#Left').click(function() { clearInterval(slideshow); show_banner(current_banner-1); });
	$('#Right').click(function() { clearInterval(slideshow); show_banner(current_banner+1); });
    
	if(typeof slideshow_loaded_callback == 'function') {
        slideshow_loaded_callback();
    }
    
});