function bbInit(){	
	slideIndex=0;
	onSlide=$(bbSlides[0]);
	offSlide=$(bbSlides[1]);
	bbPreloaded=0;
	untouched = true;
	FADEDUR = 1; //secs
	FADEINTERVAL = 3000; //microsecs
	nextFade = null;
	
	$$('.bbBtn').each(function(e,i){
		e.btnIndex = i;
		e.mainImg = bbMainSrcs[i];
		e.observe('mouseover',function(e){bbSwitchMain(e)});
		e.observe('mouseout',function(e){untouched=true; doNextFade(); });
	});

	bbPreload();
}

function bbPreload(){
	bbMainSrcs.each(function(e){
		var f = document.createElement("img");						
		f.onload = function(){bbPreloaded++};
		f.src=e;
		f.style.display='none';
		document.body.appendChild(f);
	});

	bbPreloadCheck();
}

function bbPreloadCheck(){
	if(untouched && bbPreloaded >= bbMainSrcs.length){
		doNextFade(); 
	}else{
		setTimeout(bbPreloadCheck,100);	
	}
}

function doNextFade(){
	clearTimeout(nextFade);
	nextFade=setTimeout(bbCrossFade,FADEINTERVAL);
}

function bbCrossFade(){
	if(!untouched){
		return;		
	}
	slideIndex = (slideIndex == bbMainSrcs.length-1)? 0 : slideIndex+1;

	onSlide = (onSlide == $(bbSlides[0]))? $(bbSlides[1]) : $(bbSlides[0]);
	offSlide = (offSlide == $(bbSlides[0]))? $(bbSlides[1]) : $(bbSlides[0]);

	onSlide.hide();

	onSlide.setStyle({zIndex: 20});
	offSlide.setStyle({zIndex: 10});

	makeBtnActive($(bbBtns[slideIndex]));
	
	onSlide.setStyle({backgroundImage: 'url('+bbMainSrcs[slideIndex]+')'});
	new Effect.Appear(onSlide,{duration:FADEDUR, afterFinish: doNextFade});
}

function makeBtnActive(btn){
	$$('.bbBtn').each(function(e){
		e.removeClassName('active');
		e.addClassName('inactive');
	});
	
	btn.addClassName('active');
}

function bbSwitchMain(event){
	untouched=false;
	btn = Event.element(event);
	clearTimeout(nextFade);

	slideIndex = btn.btnIndex;

	makeBtnActive(btn);

	onSlide.setStyle({backgroundImage: 'url('+btn.mainImg+')'});
	new Effect.Appear(onSlide,{duration:0});
}