var delay = 4000;
var start_frame = 0;
var timeouts = [];

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
	
	
}

function przewin(klatka) {
	
	for(var i=0; i<timeouts.length; i++) clearTimeout(timeouts[i]);
	timeouts = []; //quick reset of the timer array you just cleared
	
	
	var lis = $('slide-images').getElementsByTagName('li');
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	
	lis[klatka].show();
	
	var przyciski = $('przyciski').getElementsByTagName('li');
	
	for( i=0; i < przyciski.length; i++){
			przyciski[i].id="";
		}	
	przyciski[klatka].id="button_selected";

	//end_frame = lis.length -1;
	
	//start_slideshow(klatka, end_frame, delay, lis);
	
}





function start_slideshow(start_frame, end_frame, delay, lis) {	
	timeouts.push(setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay));
}


function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	
	var przyciski = $('przyciski').getElementsByTagName('li');
	
	for( i=0; i < przyciski.length; i++){
			przyciski[i].id="";
		}	
	przyciski[frame].id="button_selected";
	
	
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		timeouts.push(setTimeout("Effect.Appear(lisAppear);", 0));
		timeouts.push(setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850));
	})
	
}


Event.observe(window, 'load', init, false);