Kefafala vooday

<div class="slideshow_container">
	<p class="controls">
		<a class="button start_button" href="#" title="Start">Start</a>
		<a class="button stop_button" href="#" title="Stop">Stop</a>
		<span class="activity_indicator">[ Stopped ]</span>
	</p>
	<div class="slide">
		<img src="/uploads/simple-jquery-slideshows/default.gif" alt="slide1">
	</div>
	<div class="slide">
		<img src="/uploads/simple-jquery-slideshows/default.gif" alt="slide2">
	</div>
</div>

.slideshow_container {
        clear: both;
}
.controls {
	width: 100%; height: 30px;
	padding: 0;
	margin: 5px;
}
.activity_indicator {
	padding: 5px;
	margin: 0;
	color: gray;
}
.button {
	padding: 5px;
	margin-right: 10px;
	background-color: black;
	color: white;
	text-decoration: none;
}
.slide {
	float: left;
	width: 200px; height: 200px;
	padding: 0;
	margin: 5px;
}

//our slides
var additional_slides_urls = ["/uploads/simple-jquery-slideshows/chinchilla.jpg",
	"/uploads/simple-jquery-slideshows/donkey.jpg",
	"/uploads/simple-jquery-slideshows/penguin.jpg",
	"/uploads/simple-jquery-slideshows/skunk.jpg",
	"/uploads/simple-jquery-slideshows/squirrel.jpg",
	"/uploads/simple-jquery-slideshows/walrus.jpg"];

var slideshow_speed = 3500; //slide changing speed, milliseconds
var animation_speed = 600; //fade in/out speed, milliseconds

var slideshow_container = $(".slideshow_container");
var slideshow_indicator = $("span", slideshow_container); //indicator will show activity status
var slide1_container = $("div:first", slideshow_container);
var slide2_container = $("div:last", slideshow_container);

var slides = [$("img", slide1_container), $("img", slide2_container)]; //init with default images 

//load slides
$.each(additional_slides_urls, function(index, url) {
	var img = $(new Image());
	img.load(function() {
		slides[index + 2] = img;
	}).attr("src", url);
});

var timer;

//start slideshow button 
$(".start_button", slideshow_container).click(function() {
	if (additional_slides_urls.length >= 2) { //if less than 2 additional (not default) slides, it does not make sense to start slideshow
		timer = setInterval(slides_update, slideshow_speed);
		slideshow_indicator.text("[ Running ]"); //change indicator text
	}
	return false; //prevent default click action
});

//stop slideshow button
$(".stop_button", slideshow_container).click(function() {
	clearInterval(timer);
	slideshow_indicator.text("[ Stopped ]");
	return false;
});

var slide_counter = 1; //remember current slide index
var slide_is_ready = true; //slide updating animation finished

function slides_update() {
	if (slide_is_ready) {
		slide_is_ready = false;
		slide_counter++;
		var slide;
		if (slide_counter == additional_slides_urls.length + 2) slide_counter = 0; //if we come to the end of the list - returns to the first slide
		slide = slides[slide_counter];
                
		var change_slides = setInterval(function() {
                        //is next slide loaded?
			if (slide) {
				clearInterval(change_slides); //next slide is ready
                                //slide updating animation start
				if (slide_counter % 2 == 1) animate(slide, slide2_container);
				else animate(slide, slide1_container);
			}
		}, 200);
	} 
        else setTimeout(slides_update, 200);
};

function animate(next_slide, container) {
	var slide_container = container;
	var current_slide = $("img", slide_container);
	var slide = next_slide;

	slide.hide();

	current_slide.fadeOut(animation_speed, function() {
		slide_container.append(slide);
		slide.fadeIn(animation_speed, function() {
			slide_is_ready = true;
		});
		current_slide.remove();
	});
};

var slide_counter = 2;

function slides_update() {
	var counter;
	var slide1;
	var slide2;

	if (slide_counter == additional_slides_urls.length + 1) {
		slide1 = slides[slide_counter];
		slide2 = slides[0];
		slide_counter = -1;
	}
	else {
		if (slide_counter == additional_slides_urls.length + 2) slide_counter = 0;
		slide1 = slides[slide_counter];
		slide2 = slides[slide_counter + 1];
	}

	var change_slides = setInterval(function() {
      		if (slide1 && slide2) {
	        	clearInterval(change_slides);
		        animate(slide1, slide1_container);
       			animate(slide2, slide2_container);
        	}
	}, 200);
};

function animate(next_slide, container) {
	var slide_container = container;
	var current_slide = $("img", slide_container);
	var slide = next_slide;

	slide.hide();

	current_slide.fadeOut(animation_speed, function() {
		slide_container.append(slide);
		slide.fadeIn(animation_speed);
		current_slide.remove();
		slide_counter++;
	});
};