// JavaScript Document
var timeGap = 6; //seconds - change this value to increase/decrease pause between items
currid = null;

function switchTicker(){
	Event.observe($('sliderItems'),'mouseover',pauseSlider);
	Event.observe($('sliderItems'),'mouseout',playSlider);
	
	$items = $('sliderItems').getElementsByTagName("li");
	//$buttons = $('sliderButtons').getElementsByTagName("li");
	if(currid == null){
		currid = 0;
		showItem($items[currid].id,0);
		//Element.toggleClassName($buttons[currid],'selected');
		
	}else{
		//Element.removeClassName($buttons[currid],'selected');
		hideItem($items[currid].id);
		if(currid == ($items.length-1)){
			currid = 0;
		}else{
			currid = currid + 1;
		}
		showItem($items[currid].id,0.5);
		//Element.toggleClassName($buttons[currid],'selected');
	}
	timer = setTimeout(switchTicker,(timeGap*1000));
}

function pauseSlider(){
	clearTimeout(timer);
}

function playSlider(){
	timer = setTimeout(switchTicker,(timeGap*1000));
}

function switchToItem(itemNum){
	clearTimeout(timer);
	hideItem($items[currid].id);
	//Element.removeClassName($buttons[currid],'selected');
	currid = itemNum;
	showItem($items[currid].id,1);
	timer = setTimeout(switchTicker,(timeGap*1000));
	//Element.toggleClassName($buttons[currid],'selected');
}

function showItem(id,d){
	Effect.Appear($(id),{duration: 1, from: 0, to: 1,delay:d});
}

function hideItem(id){
	Effect.Fade($(id),{duration: 1, from: 1, to: 0});
}


document.observe('dom:loaded', function () { switchTicker(); });