//array of arrow locations
var theLocations=new Array();	
//array of possible arrow locations
var coords=new Array("59px","207px","353px","499px");
//array of thumbnail set left coords
var thumbLeft=new Array("-8px","-593px","-1178px","-1762px");
//set up an array of tabs
var theTabs=new Array();
//variable to hold the set of thumbnails we start on
var startingSet=0;
function moveArrow(theIndex,firstTime){
	if((Math.floor(theIndex/4))!=startingSet){
		startingSet=Math.floor(theIndex/4);
		var thumbFx=new Fx.Style('thumbNav','left',{duration:500});
		thumbFx.start(thumbLeft[startingSet]);
		theTabs.removeClass('active');
		theTabs[startingSet].addClass('active');
	}
	var myFx=new Fx.Style('homearrow','left',{duration:500});
	if(!firstTime){
		myFx.start(theLocations[theIndex]);
	}
}
function startSlides(){
	//array for possible start values
	var randomAry=new Array(0,4,8,12,16);
	var randomIndex=Math.round(Math.random()*($ES('li','tabNav').length-1));
	var startItem=randomAry[randomIndex];
	//set an array of all of the tabs (1-5)
	theTabs=$ES('li','tabNav');
	
	thumbSlide = new noobSlide({
		box: $('theThumbs'),
		items: $ES('div','theThumbs'),
		size: 571,
		handles: $ES('.thumbimg a','thumbNav'),
		handle_event: 'mouseenter',
		onWalk: function(currentItem,currentHandle){
			this.handles.removeClass('active');
			currentHandle.addClass('active');
			moveArrow(this.currentIndex,false);
		},
		startItem: startItem,
		autoPlay: false
	});
	setTimeout(hitPlay,2000);
	function hitPlay(){
		thumbSlide.play(8000,'next',500);
	}
	//initially, the slides will autoplay starting at random as set by startItem variable.
	//we will also call the moveArrow function to start the thumb slides at this thumb, and show the arrow
	var theThumbs=$ES('.thumbimg a','thumbNav');
	theThumbs[startItem].addClass('active');
	if(startItem==0){
		theTabs[startItem].addClass('active');
	} else {
		moveArrow(startItem,true);
	}
	$('homearrow').setStyle('visibility','visible');
	var fadeFx=new Fx.Style('thumbNav','opacity',{duration:1000});
	fadeFx.start(100);
	
	//loop through and set arrow coords for as many thumbs as there are, groups of 4
	var iter=0;
	for(var x=0;x<thumbSlide.items.length;x++){
		theLocations[x]=coords[iter];
		if(iter==3){
			iter=0;
		} else {
			iter++;
		}
	}
	//set up some click functions for the tabs
	theTabs.each(function(tabsClick){
		tabsClick.addEvent('click',function(event){
			//remove active class from all tabs, then add it to the one they clicked
			theTabs.removeClass('active');
			this.addClass('active');
			//walk to the first thumb and slide in that set of 4 thumbs
			thumbSlide.walk(((this.id).substring(3)-1)*4);
		});
	});
	$ES('div','theThumbs').each(function(promoPause){
		promoPause.addEvent('mouseover',function(event){
			thumbSlide.stop();										 
		});
	});
	$ES('div','theThumbs').each(function(promoPause){
		promoPause.addEvent('mouseout',function(event){
			thumbSlide.play(8000,'next',500);
		});
	});
}