// JavaScript Document
var timeGap = 8; //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.3);
		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,0.3);
	timer = setTimeout(switchTicker,(timeGap*1000));
	Element.toggleClassName($buttons[currid],'selected');
}

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

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

Event.observe(window,'load',switchTicker);