/*
Sample HTML:
<ul id="banner">
	<li><img src="ui/images/banners/banner-egg-carton.jpg" alt="Anodized Metal" /></li>
    <li><img src="ui/images/banners/banner-ar15-parts.jpg" alt="AR15 Parts" /></li>
</ul>



Styles to use:


#banner {
	padding: 0 3px;
	height: 240px;
	margin: 0;
	}
	#banner li {
		display: none;
		list-style: none;
		padding: 0; margin: 0;
		position: absolute;
		width: 724px;
		height: 240px;
		}
		#banner li.first {
			display: inherit;
			}



*/

//init with first picture
i=1;
jQuery(function($){
	$("li:first-child").css("display","block").addClass("first");
	$(".lightbox").lightBox();
	if($("#banner").children().length>1){setInterval("nextPic()",8000)};
});	

function nextPic(){
	$("#banner li:nth-child("+i+")").fadeOut("slow");
	i++;
	if(i>$("#banner").children().length){i=1;}
	$("#banner li:nth-child("+i+")").fadeIn("slow");
}