var cur = 0;
var timeOut = 5000;
var tmp = '';
var tmp2 = 'ended';
Event.observe(window, 'load', function() {
	fadeIn();
	generatePagination();
	//cur = $$('div.slide-show-image').length();
});
var fadeOut = function() {
	tmp2 = 'started';
	var pagination = $$("a.pagination");
	new Effect.Fade('image'+cur, {duration:3, from:1.0, to:0});
	Element.removeClassName($(pagination[cur]), 'current');
	cur = calcNext(cur);
    fadeIn();
	Element.addClassName($(pagination[cur]), 'current');
	tmp2 = 'ended';
}
var fadeIn = function() {
	new Effect.Appear('image'+cur, {duration:1, from:0, to:1.0});
    tmp = setTimeout("fadeOut()", timeOut);
}
var calcNext = function(cur) {
	divs = $$('div.slide-show-image');
	return (cur+1 == divs.length) ? 0 : ++cur;
}
var generatePagination = function() {
	var divs = $$('div.slide-show-image');
	var i = 0;
	var list = '';
	divs.each(function() {
		if(i == 0) list += '<li><a href="javascript:void(0);" class="current pagination" onClick="fadeAndClear('+i+');">' + (i+1) + '</a></li>';
		else list += '<li><a href="javascript:void(0);" class="pagination" onClick="fadeAndClear('+i+');">' + (i+1) + '</a></li>';
		i++;
	});
	document.getElementById('slide-show-list').innerHTML = list;
}
var fadeAndClear = function(i) {
	clearTimeOutFn();
	var pagination = $$("a.pagination");
	Element.removeClassName($(pagination[cur]), 'current');
	cur = i;
	var divs = $$('div.slide-show-image');
	divs.each(function(i) {
		$(i).hide();
	});
	fadeIn();
	Element.addClassName($(pagination[cur]), 'current');
}
var clearTimeOutFn = function() {
	clearTimeout(tmp);
}