var clipArray = "";
var clickCounter = 0;
var hpCalloutList = null;
function setup() {
	var fromInt;
	var toInt;
	// assign event handlers for clip divs
	clipArray = $$('div#homePageCalloutSlider .homepageCenterCallouts');
	hpCalloutList = new ClipScroller('homePageCalloutSlider',clipArray.length,177,5,{transition: Fx.Transitions.cubicOut, duration: 500});

	if(clipArray.length>5){
		$('sliderLeftButton').setStyle({display: 'block'});
		$('sliderRightButton').setStyle({display: 'block'});
		// activate arrows
		Event.observe($('sliderLeftButton'),'click',function(){
			clickCounter--;
			fromInt = clickCounter+1;
			toInt = clickCounter+5;
			hpCalloutList.moveLeft();
			if (fromInt <=0) {
				clickCounter =clickCounter+4
				fromInt = clickCounter+1;
				toInt = clickCounter+5;
			}
			$("featuresText").innerHTML ="FEATURES "+ fromInt +" THRU "+ toInt +" of " + clipArray.length;
		});
		Event.observe($('sliderRightButton'),'click',function(){
			clickCounter++;
			fromInt = clickCounter+1;
			toInt = clickCounter+5;
			hpCalloutList.moveRight();
			if (toInt > clipArray.length ) {
				clickCounter=clickCounter-4;
				fromInt = clickCounter+1;
				toInt = clickCounter+5;
			}
			$("featuresText").innerHTML ="FEATURES "+ fromInt +" THRU "+ toInt +" of " + clipArray.length;
		});
		
	} 
	fromInt = clickCounter+1;
	toInt = clickCounter+5;
	$("featuresText").innerHTML ="FEATURES "+ fromInt +" THRU "+ toInt +" of " + clipArray.length;
}
Event.observe(window,'load', setup);